Reactのコンポーネント共同利用実装

// 親コンポーネント
デフォルトのクラスをエクスポートし、親クラスをReact.Componentに拡張します。
  コンストラクタ(props) {
    スーパー(小道具);

    この状態 = {
      メッセージ: '子コンポーネントに渡されたメッセージ'
    }
  }

  //メッセージコールバック onMessage(messageFromChildren) {
    console.log(子供からのメッセージ);
  }

  与える（） {
    const { メッセージ } = this.state;
    戻る （
      <div>
        <子メッセージ={メッセージ} onMessage={this.onMessage.bind(this)} />
      </div>
    );
  }
}

//子供たち
デフォルトのクラスChildrenをエクスポートし、React.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
  }

  ハンドルクリック() {
    this.props.onMessage('子コンポーネントからのメッセージ');
  }

  与える（） {
    const { メッセージ } = this.props;
    戻る （
      <div>
        <p>{メッセージ }</p>
        <button onClick={ this.handleClick.bind(this) }>クリック</button>
      </div>
    );
  }
}

// 親コンポーネント
デフォルトのクラスをエクスポートし、親クラスをReact.Componentに拡張します。
  コンストラクタ(props) {
    スーパー(小道具);

    この状態 = {
      メッセージ送信者A: ''、
      メッセージFromB: ''
    }
  }

  onMessage(messageFromChildren, from) {
    console.log(子供からのメッセージ);

    this.setState({
      [from == 'A' ? 'messageFromA' : 'messageFromB']: messageFromChildren
    });
  }

  与える（） {
    定数{messageFromA, messageFromB} = this.state;
    戻る （
      <div>
        <ChildrenA message={ messageFromB } onMessage={ this.onMessage.bind(this) } />
        <ChildrenB message={ messageFromA } onMessage={ this.onMessage.bind(this) } />
      </div>
    );
  }
}

//子供A
デフォルトのクラスChildrenAをエクスポートし、React.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
  }

  ハンドルクリック() {
    this.props.onMessage('Aサブコンポーネントからのメッセージ', 'A');
  }

  与える（） {
    const { メッセージ } = this.props;
    戻る （
      <div className="pa ba">
        <p>{メッセージ }</p>
        <button onClick={this.handleClick.bind(this)}>クリックA</button>
      </div>
    );
  }
}

//子供B
デフォルトのクラスChildrenBをエクスポートし、React.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
  }

  ハンドルクリック() {
    this.props.onMessage('B 子コンポーネントからのメッセージ', 'B');
  }

  与える（） {
    const { メッセージ } = this.props;
    戻る （
      <div className="pa ba">
        <p>{メッセージ }</p>
        <button onClick={this.handleClick.bind(this)}>Bをクリック</button>
      </div>
    );
  }
} 

// 親コンポーネントのrender() {
    定数{messageFromA, messageFromB} = this.state;
    戻る （
      <div>
        <ChildrenA message={ messageFromB } onMessage={ this.onMessage.bind(this) } />
        <ChildrenB message={ messageFromA } onMessage={ this.onMessage.bind(this) } />
        <子供達C />
      </div>
    );
  }

//子供C
デフォルトのクラスChildrenCをエクスポートし、React.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
  }

  コンポーネントを更新しました() {
    console.log('ChildrenCが更新されました');
  }


  与える（） {
    戻る （
      <div>子供C</div>
    );
  }
}

var デフォルト名ミックスイン = {
    getDefaultProps: 関数 () {
        {name: "トム"} を返します。
    }
};

var デフォルトコモンミックスイン = {
    mixins:[DefaultNameMixin], //Mixinを使用する
    getDefaultProps: 関数 () {
        {food: "米"} を返します。
    }
};

var コンポーネント = React.createClass({
    mixins:[DefaultCommonMixin], //Mixinを使用する
    レンダリング:関数(){
        <h1>{this.props.name} を {this.props.food} のように返します。
    }
}); 

ReactDOM.render() は、
    <コンポーネント/>、
    document.getElementById("例")
);

'厳密な使用';  
  
// オブジェクト {value, requestChange} を構築します。value は初期値、requestChange は手動で呼び出す必要があるメソッドです。// このモジュールでは、value は state[key] の初期値、requestChange は state[key] を更新するために使用されます。  
var ReactLink = require('./ReactLink');  
  
// 属性キーを設定した後、値を受け入れ、内部でcomponent.setStateメソッドを呼び出してstate[key]=valueを更新する関数を返します。  
var ReactStateSetters = require('./ReactStateSetters');  
  
/** 
 * react で setState メソッドを手動で呼び出す一方向のデータフローに双方向バインディングを提供します。 * linkState(key).requestChange(value) を使用して値を渡した後、setState メソッドを自動的に呼び出して状態を更新します。 
 * 
 * 例 * var LinkedStateMixin = require('react-addons-linked-state-mixin'); 
 
 * var WithoutLink = React.createClass({ 
 * ミックスイン: [LinkedStateMixin], 
 * 初期状態を取得する: 関数() { 
 * {メッセージ: 'Hello!'} を返します。 
 * }, 
 * レンダリング: 関数() { 
 * var valueLink = this.linkState('message'); 
 * var handleChange = function(e) { 
 * valueLink.requestChange(e.target.value); 
 * }; 
 * <input type="text" value={valueLink.value} onChange={handleChange} /> を返します。 
 * } 
 * }); 
 */  
var リンクステートミックスイン = {  
  // ReactStateSetters.createStateKeySetter メソッドは、linkState(key) によって返されるオブジェクトの requestChange メソッドを構築するために使用されます。// 値を渡した後、setState メソッドを自動的に呼び出して状態を更新します。  
  リンクステート: 関数 (キー) {  
    新しい ReactLink(this.state[key], ReactStateSetters.createStateKeySetter(this, key)) を返します。  
  }  
};  
  
モジュールをエクスポートします。

'react-addons-linked-state-mixin' から LinkedStateMixin をインポートします。

ミックスイン: [React.addons.LinkedStateMixin],

var WithLink = React.createClass({
  ミックスイン: [LinkedStateMixin],
  初期状態を取得する: 関数() {
    {メッセージ: 'こんにちは!'} を返します。
  },
  レンダリング: 関数() {
    <input type="text" valueLink={this.linkState('message')} /> を返します。
  }
});