如何在React中创建Toast等全局组件并将其引用到其他组件中？

我正尝试使用React创建应用程序。我想向应用程序全局添加一个吐司组件，以便它可以被其他组件引用来显示自定义消息。如何在React中创建Toast等全局组件并将其引用到其他组件中？

我想补充的土司在以下层次：

ReactDOM.render(
     <BrowserRouter> 
      <section> 
        <App /> 
        <Toast /> 
      </section> 
     </BrowserRouter>

，并参阅内部应用程序的吐司组件。我怎样才能实现它？

2017-07-25 sam23

我不会这样做在React中。我会将Redux添加到我的项目中，以便组件仅与商店进行通信。然后，他们的层次结构并没有让他们很难获得他们需要的数据。您可以创建一个组件，该组件在商店中存在消息时呈现消息。然后，您可以从任何组件派发适当的操作来触发消息。 –

我没有想到使用商店的问题。感谢您的指导。 – sam23

不客气。如果你需要任何帮助，我也很乐意提供帮助。 –

您可以将Toast组件作为道具传递给应用程序。

但这可能不是你应该做的。我假设你希望Toast组件可以被其他组件所能做的各种事情触发。你会用状态来做到这一点。让Toast成为状态的函数，并让其他组件修改状态。你可以用飞机旧setState做这个，或者使用Redux。虽然Redux的作者会告诉你只使用setState。

此外，因为它是反应已经可能有7库做这个。 This one看起来很有希望。

2017-07-25 04:11:37

，但是它会适用于应用程序中的所有儿童组件吗？还是我需要每次都将它传递给子组件？ – sam23

这不是你想要做到的:)如果你这样做，你会通过道具传递元素到各种各样的孩子，它会变得非常混乱。 –

这绝对不是你只为*设置状态*的东西。为了让一个组件控制状态，它需要绑定到其他每个可能需要将消息推送到...的组件。Redux或其他状态抽象显然是一种可行的方式。 –

你应该安装包 https://www.npmjs.com/package/react-toastify ，然后添加导入并在你的头或类似侧边栏的某个组件正在被在每一个页面中使用添加

<ToastContainer />

。你现在可以在任何页面上显示吐司消息，只需

toast.error("this is toast error");

2017-08-22 12:32:19

回答