react.js - React-router 处理固定 headers 和页脚

Question

我有 React.js 应用 react-router，我对我当前的路由处理有疑问。

设计如下，常见的移动布局，固定header和页脚，中间内容：

如果它们是静态的，我可以简单地创建这样的结构：

<RatchetHeader />
<RatchetFooter />
<RouteHandler />

但偶尔它们会随着页面的变化而变化，例如：

标题和按钮文本
按钮数量
某些页面上没有页脚

是否最好将它们放在视图控制器中并且 re-render 每次都使用 RouteHandler？

Answer 1

我不知道 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;

希望对您有所帮助！

react.js - React-router 处理固定 headers 和页脚

react.js - React-router dealing with fixed headers and footers

javascript

css

reactjs

ratchet-2

react-router