web-dev-qa-db-ja.com

React：子孫に小道具を渡す

Reactの子孫コンポーネントに小道具を渡すための推奨パターンはありますか？

以下では、prop _callbackを子コンポーネントに渡します。

Master = React.createClass({
  render: function() {
    return (
      <div>
        <ListComp items={this.props.items} callback={this.handleClick} />
      </div>
    );
  }
});

ListComp = React.createClass({
  render: function() {

    this.props.items.forEach(function(item) {
      items.Push(<ItemView item={item} callback={this.props.callback} />);
    }, this);

    return (
      <ul>{items}</ul>
    );
  }
});

次に、callbackプロップが子孫コンポーネントに渡されます。

ItemComp = React.createClass({
  render: function() {
    return (
      <li><a onClick={this.handleClick} href="#">Link</a></li>
    );
  },

  handleClick: function(e) {
    e.preventDefault();
    this.props.callback();
  }
});

このようにプロップを2回渡すのは正しいですか、それとも継承を何らかの形で参照する必要がありますか？

ドキュメントにtransferPropsToメソッドがあり、ログに記録すると、子孫からthis.props.__owner__.propsを介してcallbackにアクセスできるように見えますが、これらのダブルダブルアンダースコアによって、ない.

reactjs
24
cantera

はい、これは慣用的です。各コンポーネントは、引数が小道具である関数と考えてください。その観点から、小道具を明示的に渡すことは、はるかに正常に思えます。コンポーネントへのすべての入力が何であるか、正確に何を渡しているかを確認できるように、すべてを明示的にすることにより、保守が容易になることがわかりました。

（Reactの将来のバージョンには、暗黙的に物事を伝えることを可能にする「コンテキスト」と呼ばれる機能が含まれる可能性があります。ほとんどの場合、明示的です。）

[〜＃〜] update [〜＃〜]（元の作者によるものではありません）

ドキュメントがついに追加されました（おそらくリリース0.14で、2015年夏から2016年夏の間に追加されました）。

公式Reactコンテキストドキュメント 。

これも方法です react-redux は、階層を介したストアの受け渡しを簡素化します。

24
Sophie Alpert