Question

因此，我需要呈现“警报”组件，该组件通知用户组件中的成功操作-内部函数，该函数将项目添加到购物车/本地存储。

警报组件：

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})

Answer 1

'Standard comunication'是通过将道具从父级传递到子级（甚至是几层深）来完成的。阅读docs。可以使用redux，上下文API，apollo等部署通用/应用范围状态。

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

Answer 2

据我了解，您想呈现Alarm（包含Alert）组件。但是您可以在两个地方做到这一点。

产品内部组件或任何组件内部：为此，您可以使用某些本地状态，也可以使用Redux状态

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

父组件的DOM层次之外：然后，您可以使用Portals。因为，门户网站提供了一种一流的方法来将子级呈现到父组件的DOM层次结构之外的DOM节点中。这对于加载程序和警报消息弹出窗口最有用。

如何在另一个组件的函数内部渲染react组件？

2 个答案: