使用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.现在,我希望在编辑任务后为用户提供" 您的更改已保存! "消息.

我已经为此目的创建了一个引导警报组件(<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>
}

通常,我会在活动组件之外创建此警报组件,并传递某种功能,将警报显示为活动组件的prop.与此处显示的类似.

但是,这仅适用于特定组件.但是因为它<Alert>位于我的页面的根级别(连同菜单栏,侧边栏和其他所有页面上都是静态的东西),我不能将其作为道具传递{this.props.children}.

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

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

我已经看到其他解决方案建议您可以克隆React元素的所有子元素并应用打开所需的prop alert,但由于其性质,react-router这似乎不起作用.

我怎样才能完成上述任务？组件是否可以全局访问？请注意,我不想<Alert>在每个组件中重新创建.整个DOM 只有一个这样的组件.

Answer 1

简单回答：

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

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

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

更先进的答案：

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