Question

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

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);
});

我想在路线中传递我的页面标题作为这样的道具：

<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>
    )
}
});

但道具显示为空，任何人都可以帮忙吗？

Answer 1

我遇到了同样的问题，并在React Router GitHub问题中找到了this answer。

它建议将props传递给Route组件，并使用this.props.route.*从组件中访问它们。

我只是在我自己的应用程序中使用它并且发现它非常容易使用。（比接受的答案更容易）这是答案中的示例（感谢anjdreas）：

<强>路由：

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'));

<强>组件：

class RootComp extends React.Component {
    render: {
        this.props.route.myprop // == "foo"
    }
}

Answer 2

目前你不能（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!" />
});

然后这些路线：

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

然而，在React Router github issues上有关于这个主题的讨论提供了好消息：

我只是想在这里注意，在新的API中（参见#1158）路由是只是简单的物体，所以你可以把任何你想要的道具放在它们身上。您的转换挂钩将获得路由arg并且组件将接收 this.props.route，所以你应该好好去。

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

Answer 3

如果您使用的是ES6，那么使用stateless functional component内联ES6 arrow syntax也很不错...

<Route name="info" handler={()=> <InfoPage pageTitle="Info Page" />} />

如果你的处理程序组件关心路由params或路由的其他方面，那么一定要传递props。

<Route name="info" handler={(props)=> <InfoPage pageTitle="Info Page" {...props} /> } />

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

3 个答案: