我有反应路由器调整的React.js应用程序,我对我当前的路由处理有疑问。
设计如下所示,常见的移动布局,固定的页眉和页脚,中间的内容:
如果它们是静态的,我可以简单地创建这样的结构:
<RatchetHeader />
<RatchetFooter />
<RouteHandler />
但偶尔他们会在不同页面之间进行更改,例如:
最好将它们放在视图控制器中并使用RouteHandler
每次重新渲染吗?
答案 0 :(得分:14)
我不了解Ratchet的具体内容,但从一般情况来看,在您的情况下,确实将页脚放入RouteHandler中,所以您可以根据自己的喜好定义其存在。
对于Header,我相信你总是喜欢在那里拥有它?在这种情况下,您可以将其保留在Handler之外并传递属性,以改变它的布局。
最终结果看起来与此类似(隐含了组件导入,因此我不会为了保持对逻辑的关注而不包括它们):
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;
希望有所帮助!