如何在另一个组件的函数中渲染反应组件？答案

【问题标题】：How to render react component inside function in another component?如何在另一个组件的函数中渲染反应组件？
【发布时间】：2019-09-15 05:16:47
【问题描述】：

所以我需要渲染“警报”组件，它会通知用户组件中的成功操作 - 内部函数，它将项目添加到购物车/本地存储。

报警组件：

class Alarm extends React.Component{

    render(){
        return(
                <Alert color="success">
                This is a success alert — check it out!
                </Alert>
        )
    }
}

另一个组件中的函数：

addToCart = () => {
  (Some Logic...)
}

编辑

我有 2 个组件：

警报（返回警报组件）
产品项目（包括函数 addToCart）

在初始化函数 addToCard 后，我需要渲染警报组件

解决方案

我在构造函数状态中声明“x”：

constructor(props) {
    super(props);
    this.state = {
        quantity: 1,
        x: false
    }
}

并添加到 ProductItem 组件中：

<div>
    { this.state.x &&
      <Alarm />
    }      
  </div>

而内部函数只是：

this.setState({x: true})

【问题讨论】：

看不懂你要什么，请创建Minimal, Complete, and Verifiable example
这个不清楚。
您遇到了什么错误，看起来您正在从渲染函数中返回一个组件，这是预期的。有什么问题？
您的意思不是很清楚，但我想您想在用户成功将商品添加到购物车时显示警报？如果是这样，您可以使用您正在开发的组件的本地状态，它可以包含一个值，使渲染方法知道是否呈现警报。更多信息：reactjs.org/docs/…
@Vencovsky，抱歉问题不清楚，我编辑了它。

标签： reactjs function rendering

【解决方案1】：

'Standard comunication' 组件之间的 react 是通过将 props 从父级传递给子级来完成的（即使是几级深）。阅读docs。可以使用 redux、上下文 API、apollo 等部署通用/应用范围的状态。

在这种情况下，您可能需要使用portals。

【讨论】：

【解决方案2】：

据我了解，您想要呈现警报（包含警报）组件。但是有两个地方可以做到。

在 Product Item 组件内或任何组件内： 对于这个，你可以使用一些本地状态或者一个 redux 状态

        render(){
          // const {showAlert} = this.props; // if redux state
          const {showAlert} = this.state; // local state
          return(
              <div>
                { showAlert &&
                  <Alarm />
                }      
              </div>
            )
          }

在父组件的 DOM 层次结构之外： 然后可以使用Portals。因为，Portals 提供了一种一流的方式来将子级渲染到存在于父组件的 DOM 层次结构之外的 DOM 节点中。这对于加载程序和警报消息弹出窗口非常有用。

【讨论】：