我有反应路由器的React.js应用程序,我对我当前的路由处理有疑问.
设计外观如下,普通移动布局,固定页眉和页脚,内容中间：
在这种情况下它们是静态的,我可以简单地创建这样的结构
<RatchetHeader /> <RatchetFooter /> <RouteHandler />
但是偶尔他们会从一个页面到另一个页面,例如：
>标题和按钮文本
>按钮数量
>页脚不存在于某些页面上
最好把它们放在视图控制器里,然后用RouteHandler重新渲染？
解决方法
我不知道棘轮的细节,但一般来说,在你的情况下,页脚更好地把它放在RouteHandler中,这样你可以根据你的喜好来定义它的存在.
对于标题,我相信你总是喜欢在那里吗？在这种情况下,您可以将其留在处理程序之外,并将其传递给其属性,以更改其布局.
最后的结果会看起来类似于这一点(组件导入是暗示的,因此我不包括它们,以保持关注逻辑)：
app.js：
<Route handler={AppHandler}>
<DefaultRoute handler={HomeHandler}/>
<Route name='foo' path='/foo' handler={FooHandler}/>
<Route name='bar' path='/bar' handler={BarHandler}/>
<NotFoundRoute handler={NotFoundHandler}/>
</Route>
);
App.react.js：
<div>
<Header title={this.state.title}/>
<RouteHandler {...this.props}/>
</div>
Header.react.js – 使用一些虚构的组件来说明：
var Header = React.createClass({
render: function(){
return (
<div>
<Button type="prevIoUs" title="Left"/>
<HeaderTitle>{this.props.title}</HeaderTitle>
<Button type="next" title="Right"/>
</div>
);
}
});
module.exports = Header;
Foo.react.js：
var Foo = React.createClass({
render: function(){
var footeractions = [ // Ideally you'd get this from a constants file or something alike.
{
'actionType': 'viewHome','actionIcon': 'icon-home','actionLabel': 'Home'
},{
'actionType': 'viewProfile','actionIcon': 'icon-profile','actionLabel': 'Profile'
},{
'actionType': 'viewFavorites','actionIcon': 'icon-favorites','actionLabel': 'Favorites'
},...
];
return (
<div>Your content here</div>
<Footer actions={footeractions}/>
);
}
});
module.exports = Foo;
Footer.react.js：
var Footer = React.createClass({
render: function(){
var actionItems = this.props.actions.map(function(item){
return (<ActionItem action={item.actionType} icon={item.actionIcon} label={item.actionLabel}/>);
});
return (
<div>{actionItems}</div>
)
}
});
module.exports = Footer;
然后,在Bar.react.js中,您可以不包括< Footer>组件,像这样：
Bar.react.js：
var Bar = React.createClass({
render: function(){
return (
<div>Your content here</div>
);
}
});
module.exports = Bar;
希望有帮助！