Question

我正在尝试找到在子组件中提供我的第三方Toast组件的方法。在我的示例中，我将其与app.js的直接子代一起使用。但是我不确定如何让大孩子利用它。

如果有帮助，我可以在https://github.com/CraigInBrisbane/ReactLearning处进行回购。（从来没有做过开源的东西，所以不确定是否可以编辑）

我正在尝试使用此组件：（https://github.com/jossmac/react-toast-notifications）

在我的app.js中，导入软件包，然后使用以下方式加载子组件：

<Route exact path="/accounts" component={withToastManager(Accounts)} />

然后（以某种方式）我的子组件可以访问toastManager：

const { toastManager } = this.props;

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

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

但是，对于我的NavBar ...我有点结构。

Header是我从app.js调用的组件... Header本身不使用Toast。但是它有一个名为NavBar的子项，该子项具有“注销”按钮。当我单击注销时，我想显示吐司。

但是不知道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通知的任何组件都知道？我想我需要将导航栏包装在withToastManager中，但随后所有同级都需要引用ToastManager。

任何指导都很棒。

Answer 1

您应该看一下react's Higher Order Component (HOC)文档，但基本上，您想单独包装每个需要注入navbar.js道具的组件。

在您的withToastManager文件中，您想从“反应吐司通知”中导入import { toastManager } from 'react-toast-notifications'; ... export default withToastManager( withRouter(Navbar) );，并包装导出内容：

this.props.toastManager

这会将Toast Manager添加为道具，您可以通过{{1}}在组件中访问它。

旁注，通常，您还希望使用这种相同的模式来包装需要HOC提供的需要prop /功能的组件的导出，而不是像在app.js中的路由器中那样在应用程序中的其他地方包装。< / p>

使Toast组件可用于子组件

1 个答案: