javascript – react.js – 反应路由器处理固定页眉和页脚

我有反应路由器的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;

希望有帮助！