React router - 在路由上传递道具到子组件

问题描述：

有人可以告诉我最好的方法吗？我想将路由中的页面标题道具传递给我的标题子组件。以下是我的路线：

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" />

到我的标题组件：

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?

答

目前（前1.0版）你不能用React Router做到这一点。我相信一种推荐的方法是使用包装器组件：

You can't currently (pre 1.0) do that with React Router. I believe one recommended way is to have wrapper components:

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!" />
});

然后这些路线：

<Route name="standard" handler={BaseComponent} />
<Route name="fancy" handler={FancyComponent} />
<Route name="superfancy" handler={EvenFancierComponent} />

然而，在 React Router github问题提供了好消息：

However there's a discussion on this topic on the React Router github issues which provides good news:

我只是想在新API中注意（参见＃1158 ）路线是
只是普通物体，因此你可以把任何你想要的道具放在它们上面。
你的转换钩子将得到一个路由arg，组件将收到
this.props.route，所以你应该好好去。

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.

看起来新的1.0版本处于测试阶段，所以应该很快就会推出！

It looks like that new 1.0 release is in beta and so should be coming fairly soon!

React router - 在路由上传递道具到子组件

相关推荐