假设我有一个MainHeader和一个标题.使用react router,我将组件渲染到体内.

...
<header></header>
<main>{this.props.children}</main>
...

这是我目前的路由器：

<Route component={MainLayout} onEnter={requireCordova}>
   <Route path="/home" component={Home} />
   <Route path="/settings" component={Settings} />
</Route>

我的问题是我希望MainLayout从其子项之一中获取标题(以填充标题),这可能吗？

<Route component={MainLayout} onEnter={requireCordova}>
   <Route path="/home" component={Home} title='homepage' />
   <Route path="/settings" component={Settings} title='settings'  />
</Route>

解决方法:

您不能直接在组件之间进行通信.您可能需要使用共享存储来满足此类要求-最受欢迎的解决方案是Redux.

为了解决您更新标题的特定问题-有一个简单的实用程序react-helmet可以简化过程.

您可以简单地在任何路线组件中使用头盔组件：
<头盔title =“我的标题” />和头盔将负责更新您的标题.它也适用于HTML头中的其他元素-例如.元,链接,脚本标签等.