React コンポーネント間で通信する 3 つの方法 (シンプルで使いやすい)

1. 親子コンポーネント通信

原則: 親コンポーネントは props (Vue の props とは区別されます) を介して子コンポーネントと通信し、子コンポーネントはコールバックイベントを介して親コンポーネントと通信します。

まず、親コンポーネント Parent.js と子コンポーネント Children.js を作成します。両者の関係は直接的な親子関係です。

Parent.js の親コンポーネントは以下のようになります。親コンポーネントにデフォルトの状態を与え、子コンポーネントを導入します。子コンポーネントに toChildren={this.state.msg} を追加することで、子コンポーネントに props が渡されます。

'react' から React をインポートします。
'element-react' から Button をインポートします。
'./Children' から Children をインポートします。
 
クラス Parent は React.Component を拡張します {
  コンストラクタ(props) {
	スーパー(小道具);
	この状態 = {
		メッセージ: '親コンポーネントが子コンポーネントに渡されました'
	};
    this.changeMsg = this.changeMsg.bind(this)
  }
  変更メッセージ(){
    this.setState({
      msg: '親コンポーネントが子コンポーネントに渡されます (変更後のコンテンツ)'
    })
  }
  与える（）{
    戻る （
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>親子コンポーネントの通信例</p>
        <Button onClick={this.changeMsg}>父から息子へ</Button>
        <子供 toChildren={this.state.msg}></子供>
      </div>
    ）
  }
}
 
デフォルトの親をエクスポート

Children.js の子コンポーネントは次のとおりです。初期状態は、親コンポーネントから props を通じて渡された値を取得します。

'react' から React をインポートします。
 
クラスChildrenはReact.Componentを拡張します。
  コンストラクタ(props) {
	スーパー(小道具);
	この状態 = {
		msg:this.props.toChildren // 親コンポーネントから props を通じて渡された値を取得します };
  }
  与える（）{
    戻る （
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>親コンポーネントから渡されます:</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
      </div>
    ）
  }
}
 
デフォルトの子をエクスポート

注: 子コンポーネントの値は、親コンポーネントによって子コンポーネントに配置されたフィールドプロパティと一致している必要があります。この例では、 toChildren は次のようになります。

子コンポーネントが親コンポーネントに値を渡す場合 (上向き)、親コンポーネントから渡されたコールバック関数を呼び出すことで渡すことができます。

Parent.jsで、コールバック関数callbackをChildren.jsに追加し、changeMsgメソッドをバインドします。

'react' から React をインポートします。
'./Children' から Children をインポートします。
 
クラス Parent は React.Component を拡張します {
  コンストラクタ(props) {
	スーパー(小道具);
	この状態 = {
	    メッセージ: '親コンポーネントが子コンポーネントに渡されます',
        子どもから:''
	};
    this.changeMsg = this.changeMsg.bind(this)
  }
  変更メッセージ(val){
    this.setState({
      fromChildrn: val
    })
  }
  与える（）{
    戻る （
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>親子コンポーネントの通信例</p>
        <span style={{color:'red'}}>{this.state.fromChildrn}</span>
        <Children toChildren={this.state.msg} コールバック={this.changeMsg}></Children>
      </div>
    ）
  }
}
 
デフォルトの親をエクスポート

子コンポーネントでは、this.props.callback() を使用して親コンポーネントのコールバック関数を実行し、バインディングメソッド changeMsg を実行して、子コンポーネントから渡された値を表示します。

'react' から React をインポートします。
'element-react' から Button をインポートします。
 
クラスChildrenはReact.Componentを拡張します。
  コンストラクタ(props) {
	スーパー(小道具);
	この状態 = {
		メッセージ:this.props.toChildren
	};
    this.toParent = this.toParent.bind(this)
  }
  親(){
    this.props.callback('子コンポーネントによって渡された値') //子コンポーネントはこれを介して親コンポーネントのコールバックメソッドをトリガーします}
  与える（）{
    戻る （
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>親コンポーネントから渡されます:</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <Button onClick={this.toParent}>子から親へ</Button>
      </div>
    ）
  }
}
 
デフォルトの子をエクスポート

注意: props内のコールバック関数名は一貫している必要があります。つまり、この例では、次のようにcallbackです。

要約: 上記は、親から子へは props を介して、子から親へはコールバックを実行して、直接親子コンポーネント通信を行う 1 つの方法です。

2. クロスレベルコンポーネント通信

親コンポーネントに子コンポーネントがあり、この子コンポーネントに子コンポーネントがあり、ここでは「孫コンポーネント」と呼ぶことにします。親コンポーネントが「孫コンポーネント」と通信する必要がある場合、レイヤーごとの値転送とレイヤー間の値転送という 2 つの一般的な方法があります。

1. レイヤーごとに価値を移転する

この方法は、上記の直接的な親子通信をベースに中間層を追加するものです。たとえば、親コンポーネントと「孫」コンポーネントが通信する場合、最初に親と子が通信し、次に「孫」が通信し、送信レベルは親-->子-->「孫」になります。同様に、プロパティは下方向に渡され、コールバックは上方向に渡されます。詳細は省きますが、興味があれば自分で実装してみてください。

2. レベル間の価値移転

名前が示すように、親は子 (中間層) コンポーネントを経由せずに「孫」と通信します。ここでコンテキストについて説明します。

React の公式ドキュメントではコンテキストについて次のように説明されています。

一般的な React アプリケーションでは、データはプロパティを介してトップダウン (親から子へ) で渡されますが、このアプローチは、アプリケーション内の多くのコンポーネントに必要な特定の種類のプロパティ (ロケール設定、UI テーマなど) にとっては非常に面倒です。コンテキストは、コンポーネントツリーを通じてプロパティを明示的に渡すことなく、コンポーネント間でこのような値を共有する方法を提供します。

一言でまとめると、レベル間の値の転送と状態の共有です。

簡単な例を見て、使い方を直接説明しましょう。

まず、オブジェクトのデフォルト値を持つ context.js ファイル (親ファイル、子ファイル、孫ファイルと同じディレクトリ内) を作成します。

「react」からReactをインポートします。
const MyContext = React.createContext({text:'運'});
デフォルトのMyContextをエクスポートする

次に、親コンポーネントを書き換え、コンテキストを導入し、プロバイダーを使用して現在の値を次のコンポーネントツリーに渡します。ここで、value は渡された値です。

'react' から React をインポートします。
'./Children' から Children をインポートします。
'./context' から MyContext をインポートします。
 
クラス Parent は React.Component を拡張します {
  コンストラクタ(props) {
	スーパー(小道具);
  }
  // プロバイダーを使用して、現在の値を次のコンポーネント ツリーに渡します。
  // どのコンポーネントでも、深さに関係なくこの値を読み取ることができます。
  与える（）{
    戻る （
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>コンテキスト通信の例</p>
        <MyContext.Provider value={{text:'頑張ってください'}}>
          <子供></子供>
        </MyContext.Provider>
      </div>
    ）
  }
}
 
デフォルトの親をエクスポート

子コンポーネントは中間層であり、処理されません。これは、「孫」コンポーネントをラップするために使用されます。

'react' から React をインポートします。
'./Grandson' から Grandson をインポートします。
 
クラスChildrenはReact.Componentを拡張します。
  与える（）{
    戻る （
      <div>
        <孫></孫>
      </div>
    ）
  }
}
 
デフォルトの子をエクスポート

新しい「孫」コンポーネントを追加します。これもコンテキストを導入する必要があります。コンポーネント内にstatic contextType = MyContextを追加します。このとき、this.context を介して上位層の最も近いプロバイダーから渡された値を直接取得できます。このとき、this.context = {text:good luck}、つまり親コンポーネントから渡された値です。

'react' から React をインポートします。
'./context' から MyContext をインポートします。
 
GrandsonクラスはReact.Componentを拡張します。
  静的コンテキストタイプ = MyContext
  与える（）{
    戻る （
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>渡されたコンテキスト:</p>
        <span style={{color:'blue'}}>{this.context.text}</span>
      </div>
    ）
  }
}
 
エクスポートデフォルト孫

this.context.text を通じて渡された値を取得します。

上記は親→孫、つまり下向きの処理です。孫→親と上向きに値を渡したい場合は、コールバックを使います。

値を渡して親コンポーネントを変更し、渡されたオブジェクトにプロパティを追加し、親コンポーネントメソッド value={ をバインドします。 {text:'頑張って', toParent :this.fromGranson}}

'react' から React をインポートします。
'./Children' から Children をインポートします。
'./context' から MyContext をインポートします。
 
クラス Parent は React.Component を拡張します {
  コンストラクタ(props) {
	スーパー(小道具);
    この状態 = {
      メッセージ:''
    };
    this.fromGranson = this.fromGranson.bind(this)
  }
  fromGranson(val){
    this.setState({
      メッセージ:値
    })
  }
  // プロバイダーを使用して、現在のテーマを次のコンポーネント ツリーに渡します。
  // どのコンポーネントでも、深さに関係なくこの値を読み取ることができます。
  与える（）{
    戻る （
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>コンテキスト通信の例</p>
        <span style={{color:'red'}}>{this.state.msg}</span>
        <MyContext.Provider value={{text:'頑張ってください',toParent:this.fromGranson}}>
          <子供></子供>
        </MyContext.Provider>
      </div>
    ）
  }
}
 
デフォルトの親をエクスポート

次に、孫コンポーネントにボタンを追加し、メソッドをバインドして、関数コールバックを実行します。

親(){
    this.context.toParent('孫コンポーネントが親コンポーネントにデータを転送します')
 }

'react' から React をインポートします。
'./context' から MyContext をインポートします。
'element-react' から { Button } をインポートします。
 
GrandsonクラスはReact.Componentを拡張します。
  静的コンテキストタイプ = MyContext
  コンストラクタ(props) {
		スーパー(小道具);
    this.toParent = this.toParent.bind(this)
	}
  親(){
    this.context.toParent('孫コンポーネントが親コンポーネントにデータを転送します')
  }
  与える（）{
    戻る （
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>渡されたコンテキスト:</p>
        <span style={{color:'blue'}}>{this.context.text}</span>
        <div><Button onClick={this.toParent}>コンテキストアップ</Button></div>
      </div>
    ）
  }
}
 
エクスポートデフォルト孫

デフォルトのページは次のとおりです:

ボタンをクリックすると、コンテキスト内のコールバックが実行され、値がアップロードされます。

階層がどれだけ深くても、コンテキストを使用して値を下方向または上方向に渡すことができます。

注: 下位レベルのコンポーネントで取得されるコンテキスト内のフィールドは、値で渡されるフィールドと一致している必要があります。テキストとtoParent

上記はContextの一般的な使用方法です。詳細についてはReactの公式ドキュメントをご覧ください。

コンテキスト – React

3. 兄弟（非ネスト）コンポーネント通信

2 つのコンポーネントが同じレベルまたは異なるレベルにネストされていない場合、それらのコンポーネントは相互に通信する必要があります。一般的な方法がいくつかあります。

1. コンポーネントは最初に同じ親コンポーネントに値を渡し、次に親コンポーネントを介して別のコンポーネントに値を渡し、親子コンポーネントを使用して値を渡す

2. キャッシュ sessionStorage、localStorage などを使用します。

3. 2つのコンポーネント間にジャンプがある場合は、ルーティングジャンプを使用して値を渡すことができます。詳細な使用方法は添付されています。

React 学習ノート - コンポーネント通信ルーティングパラメータ (react-router-dom) _ フロントエンド初心者 Leo のブログ - CSDN ブログ

4. イベント（パブリッシュ・サブスクライブ）

まず、イベントをインストール

npm インストールイベント保存

新しいevent.jsを作成する

'events' から EventEmitter をインポートします。
デフォルトの新しいEventEmitter()をエクスポートします。

他の 2 つのコンポーネントは同じレベルになります (親コンポーネントが異なっていても、レベルが異なっていても問題ありません)

'react' から React をインポートします。
'./Grandson' から Grandson をインポートします。
'./GrandsonOther' から GrandsonOther をインポートします。
 
クラスChildrenはReact.Componentを拡張します。
  与える（）{
    戻る （
      <div>
        <孫></孫>
        <孫その他></孫その他>
      </div>
    ）
  }
}
 
デフォルトの子をエクスポート

コンポーネント 1 はイベントをインポートし、componentDidMount フェーズでリスナーaddListener (サブスクリプション)を追加し、componentWillUnmount でリスナーremoveListenerを削除します。イベント名はコンポーネント 2 のemittingと同じになります。

'react' から React をインポートします。
'../event' からイベントをインポートします。
'element-react' から { Button } をインポートします。
 
GrandsonクラスはReact.Componentを拡張します。
  コンストラクタ(props) {
	スーパー(小道具);
    この状態 = {
      メッセージ:''
    }
    this.toOther = this.toOther.bind(this)
  }
  その他(){
    event.emit('eventMsg','eventnet から渡された値')
  }
  与える（）{
    戻る （
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>コンポーネント 2</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <div><Button onClick={this.toOther}>イベント値の転送</Button></div>
      </div>
    ）
  }
}
 
エクスポートデフォルト孫

コンポーネント 2、イベントのインポート、ボタンのバインディングメソッド、 event.emitを使用してイベントをトリガー (公開) します。

'react' から React をインポートします。
'../event' からイベントをインポートします。
'element-react' から { Button } をインポートします。
 
GrandsonクラスはReact.Componentを拡張します。
  コンストラクタ(props) {
	スーパー(小道具);
    この状態 = {
      メッセージ:''
    }
    this.toOther = this.toOther.bind(this)
  }
  その他(){
    event.emit('eventMsg','eventnet から渡された値')
  }
  与える（）{
    戻る （
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>コンポーネント 2</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <div><Button onClick={this.toOther}>イベント値の転送</Button></div>
      </div>
    ）
  }
}
 
エクスポートデフォルト孫

ボタンをクリックすると、コンポーネント 2 がイベントを公開し、コンポーネント 1 がイベントをリッスン (サブスクライブ) して、コンテンツを更新します。（パブリッシャーとサブスクライバーのIDが交換されている場合、書き込み方法は同じです）

注: 2 つのコンポーネントがイベントを使用して通信する場合は、上記の例のeventMsgのように、公開とサブスクライブのイベント名が一貫していることを確認してください。

要約: イベントメソッドは比較的柔軟性があります。親子、クロスレベル、同一レベル、または関連のないコンポーネントであっても、このメソッドを使用して通信できます。

4. ルーティング値

React 学習ノート - コンポーネント通信ルーティングパラメータ (react-router-dom)

5. 再出発

リリース予定。

概要: この記事では主に、React でよく使用されるコンポーネント通信方法について説明します。日常業務では、さまざまなアプリケーションシナリオに応じて異なる通信方法を選択すると、通信プロセスがよりシンプルで明確になります。

Vue でコンポーネントが通信する方法を比較すると、多くの類似点が見つかります。

Vue コンポーネント間の通信方法 (複数のシナリオ、わかりやすい、コレクションに推奨)

これで、React コンポーネント間の通信方法 3 つ (シンプルで使いやすい) についての記事は終了です。React コンポーネント間の通信に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: