親コンポーネントから子への連携は、単純にpropsの受け渡しをするだけです。

子から親への連携は例を用いて説明します。 例えば、GroceryListコンポーネントが配列から生成される項目のリストを持ち、 リストの項目がクリックされた際に、あなたはその名前を表示したいとします。

var GroceryList = React.createClass({
  handleClick: function(i) {
    console.log('You clicked: ' + this.props.items[i]);
  },

  render: function() {
    return (
      <div>
        {this.props.items.map(function(item, i) {
          return (
            <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
          );
        }, this)}
      </div>
    );
  }
});

React.render(
  <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
);

bind(this, arg1, arg2, ...)を使用していることに注意して下さい。 単純にhandleClickに引数を渡しています。 これはReactによる新しいコンセプトでも何でもなく、JavaScriptでよく使用されるテクニックです。

親と子の関係性を持たない2つのコンポーネント間で連携するには、グローバルなイベントシステムを設定します。 componentDidMount()内でイベントを登録し、 componentWillUnmount()内でイベント登録を削除し、 イベントを受け取った際にsetState()を呼び出します。 Fluxパターンは、 この手配を可能とする1つの方法です。

 Back to top