如何在多个组件中使用React-toastify

Question

我有一个主项目，假设项目A导入了几个其他反应组件，例如模块联合反应组件项目B。 在项目A中，我已经在

App.js

中安装并导入了react toastify容器。ProjectB也被导入到

App.js

中。假设projectA中的

App.Js

是这样的

const App = () => {
 return(
    <div>
      <ToastifyContainer />
      <ProjectB />
      <OtherCompoentsFromProjectA />
    </div>
 )
}

因此，在这种情况下，toastify 容器仅适用于 ProjectA。但是，似乎通知在项目 B 中不起作用。只有当我们也在projectB 中导入ToastifyContainer 时，这种方式才有效。因此，这意味着组件越多，react toastify 需要执行的导入就越多。这是最佳实践吗？或者有没有其他方法可以处理它，这样 toastify 组件只需添加一次，例如仅在项目 A 中添加。

Answer 1

如果您的组件没有使用门户或任何 iframe，React 应与其子组件共享导入，在本例中，与同级组件共享导入。所以一般来说，如果你提升状态，跨组件共享相同的库就足够了。

在您的例子中，ProjectB 是

ToastifyContainer

的兄弟组件，因此您需要确保这些组件也是兄弟组件，否则，只需将

ToastContainer

提升到其父组件即可。

之后您就可以使用它的

toast

功能了。