React
コンポーネント間の通信
サーチ…
備考
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();
- サブスクライブする: