我有一个网站,内容如下 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 传递.
请允许我再次说明我想要实现的流程:
- 用户将编辑保存到
<TaskEdit>
中的任务. - 编辑已保存,用户返回
<TaskList>
. - 紧接着,我想要
<Alert>
触发并显示一条消息。
我见过其他解决方案,建议您可以克隆 React 元素的所有子元素并应用打开 alert
所需的 Prop 。 ,但由于 react-router
的性质这似乎并没有真正起作用。
如何才能实现上述目标?有没有办法让组件可以全局访问?请注意,我不想重新创建 <Alert>
在每个组件中。整个 DOM 中只有一个这样的组件。
最佳答案
简单答案:
将您的警报组件放入顶级 View 中,然后使用一些 pubsub 或事件总线库来更新它。
在您的警报组件 onComponentDidMount 函数中,您监听特定事件和数据并相应地更新其状态(可见性和消息)
在任务保存函数中,您将事件发布到事件总线。
更高级的答案:
使用 React Flux 库 https://facebook.github.io/flux/docs/overview.html
关于reactjs - 使用react-router从this.props.children访问React组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36833463/