サーチ…


備考

Reactコンポーネント間の通信には合計3つのケースがあります。

  • ケース1:親と子のコミュニケーション
  • ケース2:子供と親のコミュニケーション
  • ケース3:関連していないコンポーネント(コンポーネント間の通信)

親コンポーネントと子コンポーネント

Reactの世界では非常に自然であり、チャンスはあなたがすでに使っている最も簡単なケースです。

子コンポーネントに小道具渡すことができます 。この例では、 messageは子コンポーネントに渡す小道具であり、名前メッセージは任意に選択されています。名前は任意です。

import React from 'react';

class Parent extends React.Component {
    render() {
        const variable = 5;
        return (
            <div>
                <Child message="message for child" />
                <Child message={variable} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return <h1>{this.props.message}</h1>
    }
}

export default Parent;

ここで、 <Parent />要素は、二つのレンダリング<Child />渡し、部品をmessage for child第1成分と内側5第1内部。

要約すると、もう1つ(子供)をレンダリングしていくつかの小道具を渡すコンポーネント(親)があります。

子コンポーネントから親コンポーネントへ

データを親に送り返すと、親コンポーネントから子コンポーネントへの関数として関数を渡し 、子コンポーネントはその関数を呼び出します

この例では、Childコンポーネントに関数を渡し、Childコンポーネント内でその関数を呼び出すことによってParent状態を変更します。

import React from 'react';

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };

        this.outputEvent = this.outputEvent.bind(this);
    }
    outputEvent(event) {
        // the event context comes from the Child
        this.setState({ count: this.state.count++ });
    }

    render() {
        const variable = 5;
        return (
            <div>
                Count: { this.state.count }
                <Child clickHandler={this.outputEvent} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return (
            <button onClick={this.props.clickHandler}>
                Add One More
            </button>
        );
    }
}

export default Parent;

親の状態を変更する親のoutputEventメソッドは、子のボタンonClickイベントによって呼び出されることに注意してください。

関連していないコンポーネント

あなたのコンポーネントが親子関係を持たない(または関係がありますが、壮大な壮大な息子のようにそれ以上の場合)唯一の方法は、あるコンポーネントがサブスクライブし、もう一方のコンポーネントにシグナルを送ることです。

これは、イベントシステムの2つの基本的な操作です:通知するイベントを購読/聞き取り 、イベントを送信/トリガー/パブリッシュ/ディスパッチして 、希望者に通知します。

少なくとも3つのパターンがあります。 ここで比較を見つけることができます。

簡単な要約を以下に示します。

  • パターン1: Event Emitter / Target / Dispatcher :リスナーは、購読するためにソースを参照する必要があります。

    • サブスクライブする: otherObject.addEventListener('click', () => { alert('click!'); });
    • ディスパッチする: this.dispatchEvent('click');
  • パターン2: パブリッシュ/サブスクライブ :イベントをトリガーするソースへの特定の参照は必要ありません。すべてのイベントを処理するグローバルオブジェクトがどこからでもアクセスできます。

    • 登録するには: globalBroadcaster.subscribe('click', () => { alert('click!'); });
    • ディスパッチする: globalBroadcaster.publish('click');
  • パターン3: シグナル :Event Emitter / Target / Dispatcherと似ていますが、ここではランダムな文字列は使用しません。イベントを発生させる可能性のある各オブジェクトには、その名前の特定のプロパティが必要です。このようにして、オブジェクトがどのイベントを放出できるかが正確に分かります。

    • サブスクライブする: otherObject.clicked.add( () => { alert('click'); });
    • ディスパッチする: this.clicked.dispatch();


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow