javascript 反应路由器 - 将路由上的道具传递给子组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30871070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React router - pass props on routes to child components
提问by Bomber
Can someone please tell me the best way to do this? I would like to pass a page title prop from my route into my header child component. Here are my routes:
有人可以告诉我这样做的最佳方法吗？我想将页面标题道具从我的路线传递到我的标题子组件中。以下是我的路线：
var sampleApp= React.createClass({
render: function (){
return (
<div className="our-schools-app">
<Header />
<RouteHandler />
<Footer />
</div>
);
},
});
var routes = (
<Route name="app" path="/" handler={OurSchoolsApp}>
<DefaultRoute name="home" handler={HomePage} />
<Route name="add-school" handler={AddSchoolPage} />
<Route name="calendar" handler={CalendarPage} />
<Route name="calendar-detail" path="calendar-detail/:id" handler={CalendarDetailPage} />
<Route name="info-detail" path="info-detail/:id" handler={InfoDetailPage} />
<Route name="info" handler={InfoPage} />
<Route name="news" handler={NewsListPage} />
<Route name="news-detail" path="news-detail/:id" handler={NewsDetailPage} />
<Route name="contacts" handler={ContactPage} />
<Route name="contact-detail" handler={ContactDetailPage} />
<Route name="settings" handler={SettingsPage} />
</Route>
);
Router.run(routes, function(Handler){
var mountNode = document.getElementById('app');
React.render(<Handler /> , mountNode);
});
I would like to pass the title of my page in the route as a prop like this:
我想在路线中将我的页面标题作为这样的道具传递：
<Route name="info" handler={InfoPage} pageTitle="Info Page" />
To my header component:
到我的标题组件：
var Header = React.createClass({
render: function () {
return (
<div className="bar bar-header"
style={this.getStyle()}>
<HomeButton />
<div className="h1 title">{this.props.pageTitle}</div>
</div>
)
}
});
But the props show as empty, can anyone help?
但是道具显示为空，有人可以帮忙吗？
采纳答案by Colin Ramsay
You can't currently (pre 1.0) do that with React Router. I believe one recommended way is to have wrapper components:
您当前（1.0 之前）无法使用 React Router 执行此操作。我相信一种推荐的方法是使用包装器组件：
var BaseComponent = React.createClass({
render: function() {
return <p>{this.props.text}</p>
}
});
var FancyComponent = React.createClass({
return <BaseComponent text="fancy!" />
});
var EvenFancierComponent = React.createClass({
return <BaseComponent text="SUPER fancy!" />
});
Then these routes:
然后这些路线：
<Route name="standard" handler={BaseComponent} />
<Route name="fancy" handler={FancyComponent} />
<Route name="superfancy" handler={EvenFancierComponent} />
However there's a discussion on this topic on the React Router github issueswhich provides good news:
然而，在React Router github 问题上有一个关于这个主题的讨论，它提供了好消息：
I just wanted to note here that in the new API (see #1158) routes are just plain objects, so you can put whatever props you want on them. Your transition hooks will get a route arg and components will receive this.props.route, so you should be good to go.
我只是想在这里指出，在新的 API（参见#1158）中，路由只是普通对象，因此您可以在它们上放置任何您想要的道具。你的过渡钩子会得到一个路由参数，组件会收到 this.props.route，所以你应该很高兴。
It looks like that new 1.0 release is in beta and so should be coming fairly soon!
看起来新的 1.0 版本处于测试阶段，所以应该很快就会发布！
回答by arne.z
I just had the same problem and found this answerin the React Router GitHub issues.
我刚刚遇到了同样的问题，并在 React Router GitHub 问题中找到了这个答案。
It suggests to pass the propsto the Routecomponent and access them from the component with this.props.route.*.
它建议将 传递props给Route组件并使用this.props.route.*.
I just used if for my own application and find it very easy to use. (Especially easier than the accepted answer) This is the example from the answer (thanks to anjdreas):
我只是将 if 用于我自己的应用程序，并发现它非常易于使用。（比接受的答案更容易）这是答案中的示例（感谢anjdreas）：
Routing:
路由：
React.render((
<Router>
<Route path="/" component={RootComp} myprop="foo">
<Route path="foo" component={FooComp}>
<Route path="bar" component={BarComp} />
</Route>
</Route>
</Router>
), document.getElementById('example'));
Component:
零件：
class RootComp extends React.Component {
render: {
this.props.route.myprop // == "foo"
}
}
回答by Chris W.
If you are using ES6, then it is also rather nice to inline a stateless functional componentusing ES6 arrow syntax...
如果您使用的是 ES6，那么使用ES6 箭头语法内联无状态功能组件也相当不错……
<Route name="info" handler={()=> <InfoPage pageTitle="Info Page" />} />
If your handler component cares about routed paramsor some other aspect of the route then be sure to pass down the props.
如果您的处理程序组件关心路由params或路由的其他方面，那么一定要传递props.
<Route name="info" handler={(props)=> <InfoPage pageTitle="Info Page" {...props} /> } />
