如何在另一个组件的函数中渲染React组件？

Question

我需要渲染“警报”组件，该组件在函数内通知用户有成功的操作，例如向购物车/本地存储添加项目。

警报组件：

最初的回答：

class Alarm extends React.Component{

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

在另一个组件中的函数：

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

---

编辑

我有两个组件：

• Alarm（返回Alert组件）
• Product Item（包括addToCart函数）

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

---

解决方案

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

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

并且在ProductItem组件中添加：

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

And inside function just:

this.setState({x: true})

- Piotr Żak

---

我无法理解你想要什么，请创建“最小化、完整和可验证示例”（Minimal, Complete, and Verifiable example，简称MCVE）。 - Vencovsky

这个不清楚。 - HolyMoly

你遇到了什么错误？看起来你正在从渲染函数中返回一个组件，这是可以预料的。问题出在哪里？ - HolyMoly

不太清楚你的意思，但我认为你想在用户成功添加商品到购物车时显示警报？如果是这样，你可以使用正在开发的组件的本地状态，该状态可以包含一个值，使渲染方法知道是否呈现警报。更多信息：https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class - Sanders

@Vencovsky，抱歉问题不够清晰，我已经编辑过了。 - Piotr Żak

如果不使用全局状态，那么就要看组件的层次结构。不知道具体情况很难给出答案 - 但是我已经使用了从子组件到父组件的回调来发送数据（如果这是层次结构）。如果警报组件是产品项的子项，则可以工作；如果它们是兄弟姐妹，都包含在父容器中，也可以工作。您将使用回调在父组件中设置状态，并且警报组件将在渲染中被包装在条件语句中，该条件语句将根据状态显示该组件（或不显示）。 - HolyMoly

Answer 1

我理解您想要渲染包含警报的警报组件。但有两个地方可以这样做。

1. 在产品项组件内或任何组件内部： 对于这种情况，您可以使用一些本地状态或可能是redux状态

Translated:

我了解到您想要呈现包含警报的警报组件。但是有两个地方可以实现。

1. 在产品项组件内或任何组件内部： 针对此情况，您可以使用一些本地状态或者Redux状态。

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

2. 父组件DOM层次结构之外：那么你可以使用Portals。因为Portals提供了一种将子元素渲染到存在于父组件DOM层次结构之外的DOM节点的一流方法。这对于加载器和警报消息弹出框非常有用。

注：Original Answer翻译成“最初的回答”未能理解其上下文，因此未进行翻译。

- Rahul Saini

Answer 2

在React中，组件之间的“标准通信”是通过从父组件传递属性到子组件（即使在多层级的情况下）来完成的。请阅读文档。可以使用Redux、Context API、Apollo等部署常见的/应用程序范围的状态。

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

- xadm