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组件(检查上面的Router)：

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.与here所示类似.

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

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

>用户将编辑内容保存到< TaskEdit>中的任务.
>保存编辑并将用户带回< TaskList>.
>之后,我想< Alert>触发,并显示一条消息.

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

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