Javascript 使我的Toast组件对子组件可用

我正试图找到一种方法，让我的第三方Toast组件在子组件中可用。在我的示例中，我让它与

app.js

的直接子项一起工作。但我不知道如何让任何孙子孙女利用它

如果有帮助的话，我有回购协议。（从未做过开源的东西，所以不确定是否可以编辑）

我正在尝试使用此组件： （）

在my app.js中，导入包，然后使用以下内容加载子组件：

然后（不知何故）my child组件可以访问toastManager：

const{toastManager}=this.props

我可以通过以下方式显示toast通知：

toastManager.add('Login Success', {
                appearance: 'success',
                autoDismiss: true,
                pauseOnHover: false,
              });

然而，对于我的导航栏。。。我有点条理

Header是我从app.js调用的组件。。。这是赛尔夫，不用烤面包。但它有一个名为NavBar的子项，它有一个注销按钮。当我单击注销时，我想显示toast

但它不知道ToastManager是什么

我正在尝试：

handleLogout() {
  const { toastManager } = this.props;
  const {pathname} = this.props.location;
  this.context.changeAuthenticated(false);
  if(pathname !== "/") {
    this.props.history.push("/");
  }
  toastManager.add('You\re now logged out', {
    appearance: 'success',
    autoDismiss: true,
    pauseOnHover: false,
  });

}

但是toastManager不是我可以使用的项目

有没有一种方法可以让任何使用Toast通知的组件知道它们？我想我需要用ToastManager将导航栏包装成
，但是我所有的兄弟姐妹都需要有ToastManager的参考

任何指导都很好。
您应该看一下文档，但基本上您希望使用Toastmanager将需要
道具的每个组件单独包装起来

在
navbar.js
文件中，您需要从“react toast notifications”导入
with Toastmanager
，并包装导出：

import { toastManager } from 'react-toast-notifications';

...

export default withToastManager(
  withRouter(Navbar)
);

这将添加toast manager作为道具，您可以通过
This.props.toastManager
在组件中访问该道具

附带说明，通常您还希望使用相同的模式包装需要HOC提供的道具/功能的组件的导出，而不是应用程序中的其他位置，如app.js中的路由器。
您是否将toastManager作为道具从标头（父级）组件传递到导航栏（子级）？因为我看不到您在代码中传递道具。您应该认真阅读高阶组件，它将解释
withToastManager
如何包装您的帐户组件并添加更多道具，如toast manager。只需使用Toastmanager
HOC使用相同的
包装导航栏组件的导出即可。@SmSrikanth-有人建议将道具从Header传递到Hanvbar，这样代码现在就有了，并且可以工作了。但我不确定这是否正确。我觉得我不应该把道具从父母传给孩子，一直传下去。但也许是这样是吗？