javascript react.js - 处理固定页眉和页脚的 React-router
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28077374/
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.js - React-router dealing with fixed headers and footers
提问by Kosmetika
I have React.js app flavored with react-router, I have a doubt regarding my current routes handling.
我有使用 react-router 调味的 React.js 应用程序，我对我当前的路由处理有疑问。
Design looks as follows, common mobile layout, fixed header and footer, content in the middle:
设计如下，常见的移动布局，固定的页眉和页脚，中间的内容：
In the case they are static I can simply create such structure:
如果它们是静态的，我可以简单地创建这样的结构：
<RatchetHeader />
<RatchetFooter />
<RouteHandler />
But occasionally they would change from page to page, for example:
但偶尔他们会从一页到另一页改变，例如：
- title and button texts
- number of buttons
- footer is not present on some pages
- 标题和按钮文本
- 按钮数量
- 某些页面上没有页脚
Is it better to put them inside view controllers and re-render everytime with RouteHandler?
将它们放在视图控制器中并每次都重新渲染会更好RouteHandler吗？
回答by Alexandre Theodoro
I don't know specifics of Ratchet, but in general terms of react, in your situation, it's better indeed for the footerto put it inside a RouteHandler, so that you can define its presence depending on your preferences.
我不知道 Ratchet 的具体细节，但一般来说，在您的情况下，将页脚放在 RouteHandler 中确实更好，这样您就可以根据自己的喜好定义它的存在。
For the Header, I believe you'd always like to have it there? In that case, you could leave it outside the Handler and pass it properties instead to change it's layout.
对于 Header，我相信你总是喜欢把它放在那里？在这种情况下，您可以将它留在 Handler 之外并传递它的属性来更改它的布局。
The final result would look something similar to this (the component imports are implied, therefore I'm not including them for the sake of keeping focus on the logic):
最终结果看起来与此类似（隐含组件导入，因此我不包括它们是为了保持对逻辑的关注）：
The app.js:
在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>
);
);
The App.react.js:
该App.react.js：
<div>
<Header title={this.state.title}/>
<RouteHandler {...this.props}/>
</div>
The Header.react.js- using some imaginary components for illustration:
所述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;
The Foo.react.js:
该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;
The Footer.react.js:
该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;
Then, in the Bar.react.js you could just not includethe <Footer>component, like this:
然后，在 Bar.react.js 中，您可以不包含该<Footer>组件，如下所示：
The Bar.react.js:
该Bar.react.js：
var Bar = React.createClass({
render: function(){
return (
<div>Your content here</div>
);
}
});
module.exports = Bar;
Hope that helps!
希望有帮助！
