11

私は React-router で味付けされた React.js アプリを持っています。現在のルート処理について疑問があります。

デザインは次のようになります。一般的なモバイル レイアウト、固定のヘッダーとフッター、コンテンツが中央に配置されています。

ここに画像の説明を入力

それらが静的な場合、そのような構造を簡単に作成できます。

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

ただし、ページごとに変更される場合もあります。たとえば、次のようになります。

  • タイトルとボタンのテキスト
  • ボタン数
  • 一部のページでフッターが表示されない

それらをView Controller内に配置し、毎回再レンダリングする方が良いRouteHandlerですか?

4

1 に答える 1

15

ラチェットの詳細はわかりませんが、反応の一般的な観点から、あなたの状況では、好みに応じてその存在を定義できるように、フッターを 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;

それが役立つことを願っています!

于 2015-02-02T13:39:34.207 に答える