React.js - React-router, работающий с фиксированными верхними и нижними колонтитулами

У меня есть приложение React.js, приправленное реактивным маршрутизатором, у меня есть сомнения относительно обработки текущих маршрутов.

Дизайн выглядит следующим образом: общий макет мобильного телефона, фиксированный заголовок и нижний колонтитул, содержимое посередине:

enter image description here

В случае, если они статичны, я могу просто создать такую ​​структуру:

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

Но иногда они меняются со страницы на страницу, например:

  • тексты заголовков и кнопок
  • количество кнопок
  • нижний колонтитул отсутствует на некоторых страницах

Лучше ли размещать их внутри контроллеров представления и повторно отображать каждый раз с помощью RouteHandler?

ОТВЕТЫ

Ответ 1

Я не знаю специфики Ratchet, но в общих чертах реагировать, в вашей ситуации, лучше для нижнего колонтитула помещать его внутри 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;

Надеюсь, что это поможет!