reactjs - 使用react-router从this.props.children访问React组件

Question

我有一个网站，内容如下 react-router和react-router-relay设置:

main.jsx:

<Router history={browserHistory} render={applyRouterMiddleware(useRelay)}>
  <Route path="/:classroom_id" component={mainView} queries={ClassroomQueries}>
    <IndexRoute component={Start} queries={ClassroomQueries} />
    <Route path="tasks" component={TaskRoot} queries={ClassroomQueries}>
      <IndexRoute component={TaskList} queries={ClassroomQueries} />
      <Route path="task/:task_id" component={TaskView} queries={ClassroomTaskQueries} />
      <Route path="task/:task_id/edit" component={TaskEdit} queries={ClassroomTaskQueries} />
    </Route>
  </Route>
</Router>

该网站是一个虚拟教室，教师可以在其中为学生创建任务。这些任务也可以编辑。

当用户编辑 TaskEdit 中的任务时并点击“保存”，应用更改并将用户重定向到 TaskList 。现在，我想在编辑任务后向用户提供“您的更改已保存!”消息。

我创建了一个bootstrap alert组件(<Alert>)就是为了这个目的。

出于说明目的，假设我有以下 mainView组件(检查上面的路由器):

mainView.js:

render() {
  <div>
    <Menu />
    <Row>
      <Col md={3}>
        <Sidebar />
      </Col>
      <Col md={9}>
        {this.props.children}  <-- Start, TaskRoot, etc go here
      </Col>
    </Row>
    <Alert someProps={...} />  <-- Popup component
  </div>
}

通常，我会在事件组件之外创建此警报组件，然后传递某种将警报显示为事件组件的函数。类似于显示的 here .

但是，这仅适用于特定组件。但因为<Alert>位于我页面的根级别(以及所有页面上的菜单栏、侧边栏和其他静态内容)，由于 {this.props.children} 我无法将其作为 prop 传递.

请允许我再次说明我想要实现的流程:

1. 用户将编辑保存到 <TaskEdit> 中的任务.
2. 编辑已保存，用户返回 <TaskList> .
3. 紧接着，我想要<Alert>触发并显示一条消息。

我见过其他解决方案，建议您可以克隆 React 元素的所有子元素并应用打开 alert 所需的 Prop 。 ，但由于 react-router 的性质这似乎并没有真正起作用。

如何才能实现上述目标？有没有办法让组件可以全局访问？请注意，我不想重新创建 <Alert>在每个组件中。整个 DOM 中只有一个这样的组件。

Answer 1

简单答案:

将您的警报组件放入顶级 View 中，然后使用一些 pubsub 或事件总线库来更新它。

在您的警报组件 onComponentDidMount 函数中，您监听特定事件和数据并相应地更新其状态(可见性和消息)

在任务保存函数中，您将事件发布到事件总线。

更高级的答案:

使用 React Flux 库 https://facebook.github.io/flux/docs/overview.html