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

Posted 2023-02-22

【中文标题】react.js - 处理固定页眉和页脚的 React-router

【英文标题】：react.js - React-router dealing with fixed headers and footers

【发布时间】：2015-03-20 13:43:35

【问题描述】：

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

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

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

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

但有时它们会因页面而异，例如：

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

将它们放在视图控制器中并每次使用RouteHandler 重新渲染会更好吗？

【参考方案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;

希望有帮助！