React の知識の主な内容の 1 つは、コンポーネント間の通信です。ここでは、よく使用されるコンポーネント通信方法をいくつか紹介し、例を組み合わせ、わかりやすく、おすすめのコレクションを紹介します。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します
この記事では、ブロック崩しピンボールゲームを実装するためのJSの具体的なコードを参考までに紹介します...
この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...
みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...
Flash ファイル形式: .FLV および .SWFフラッシュ ビデオ形式には、.flv と .s...
layui テーブルには複数行のデータがあります。外部入力コンテンツを通じて、指定された行を見つけ...
この記事では主に、Vue で TodoList をカプセル化するケースと、ブラウザのローカル キャッ...
Linux のデフォルトの ssh リモート ポートは 22 です。デフォルトのポートは、悪意のある...
目次複数の変数を同時に宣言する場合は、1 行に短縮できます。分割代入は複数の変数に同時に値を割り当て...
ここ2日間Javaを復習するつもりなので、練習にdubboを使ってショッピングモールプロジェクトを書...
目次1. プロトタイプモード例1例2例3 2. オブザーバーパターン1. プロトタイプモードプロトタ...
Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...
フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...
ほとんどのナビゲーション バーは、下の図に示すように水平に配置されていますが、これはどのように実現さ...
この記事では、キャンバスとjsを使用して簡単な飛行機戦争を実装する方法を参考までに紹介します。具体的...
WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。ミニプログラムに...