Reactにおけるコンポーネント通信の詳細な説明

Reactにおけるコンポーネント通信の詳細な説明

親コンポーネントは子コンポーネントと通信します

  • 親コンポーネントは状態を子コンポーネントに渡し、子コンポーネントはそれをプロパティとして受け取ります。親コンポーネントの状態が変化すると、子コンポーネントが受け取るプロパティも変化します。
  • 親コンポーネントは ref を使用して子コンポーネントをマークし、子コンポーネントのメソッドを呼び出して子コンポーネントの状態を変更します。親コンポーネントは子コンポーネントのメソッドを呼び出すこともできます。

親グループ内のref参照を定義する

'react' から React,{Component,createRef} をインポートします。
'./Child1' から Child1 をインポートします
デフォルトクラスAppをエクスポートし、Componentを拡張します。
    コンストラクタ(props){
        スーパー(小道具)
        this.child = createRef()
    }
    与える(){
        戻る(
            <div>
                <Child1 ref={this.child}/>
                <ボタンのonClick={this.fn.bind(this)}></ボタン>
            </div>
        )
    }
    関数(){
        const 子 = this.child.current
        子.setTitle()
    }
}

サブコンポーネントはデータソースとデータソースの変更方法を定義します

React をインポートします。{Component} を 'react' からインポートします。
エクスポートデフォルトクラスChild1はComponentを拡張します{
    状態={
        title:'タイトル'
    }
    与える(){
        戻る (
            <div>
                {この州のタイトル}
            </div>
        )
    }
    タイトルを設定する(){
        this.setstate({title:'hh'})
    }
}

子コンポーネントは親コンポーネントと通信します

親コンポーネントは、独自のメソッドの 1 つを子コンポーネントに渡します。メソッドでは、状態の変更など、何でも実行できます。子コンポーネントは、 this.propsを通じて親コンポーネントのメソッドを受け取り、それを呼び出します。

コンポーネント間の通信

React には、この問題を解決するための Vue のようなイベント バスがありません。 1 つの方法は、共通の親コンポーネントを使用してプロキシ経由で実装することですが、プロセスは非常に面倒になります。 React は、コンポーネント ツリーの各レイヤーにプロパティを明示的に渡すことなく、コンポーネント間の通信を実現するための Context を提供します。

複雑な非親子コンポーネント通信はReactでは扱いにくく、複数のコンポーネント間でのデータ共有も扱いにくい。実際の作業では、flux、redux、mobxを使用して実装します。

先祖と子孫

  1. createContext で Provider、COnsumer をエクスポートするストア クラスを定義します。
  2. 祖先ノードにメッセージを公開する: プロバイダー値 = 任意のデータ
  3. 子孫ノードでサブスクライブ: コンシューマー コールバック関数 {value=>(component)}
    1. データソースストアを定義する
    ストア
React をインポートし、 'react' から {createContext} を作成します。
{プロバイダー、コンシューマー} = createContext() を作成します。
輸出 { 
    プロバイダー、//パブリッシュ コンシューマー //サブスクライブ}

2. 祖先ノード

'react' から React 、{Component} をインポートします。
'./store' から {Provider,Consumer} をインポートします。
'./Son' から Son をインポートします
デフォルトクラスAppをエクスポートし、Componentを拡張します。
    コンストラクタ(props){
        スーパー(小道具)
        this.state={
            名前:'mingcen'
        }
    }
    与える(){
        戻る (
            <div>
                <プロバイダー値={this.state.name}>
                    <息子/>
                </プロバイダー>
            </div>
        )
    }
}

3. 子孫ノード

React をインポートします。{Component} から 'react'
'./store' から {Consumer} をインポートします。
エクスポートデフォルトクラスSon1はComponentを拡張します{
    コンストラクタ(props){
        スーパー(小道具)
        this.state={
            名前:'ううう'
        }
    }
    与える(){
        戻る(
            <div>
                <消費者>
                   {
                        値=>{
                            <div>{値.名前}</div>
                        }
                   }
                </消費者>
            </div>
        )
    }
}

ブラザーノード通信

  • 子オブジェクトがイベントに添付されます
  • 不動産に掛かっているもう一つのもの
  • 別のコンポーネントのプロパティを変更することで、別のコンポーネントが受け入れるコンテンツを変更できます。

祖先

状態={
    カウント:1,
    setCount:()=>{
        this.setState(state=>{
            戻る {
                カウント:++状態.カウント
            }
        })
    }
}
与える(){
    {count,setCount} = this.state とします。
    戻る(
        <div>
            <プロバイダー値={{count,setCount}}>
                <Cmp1></Cmp1>
                <Cmp2></Cmp2>
            </プロバイダー>
        </div>
    )
}

ブラザーCmp2

React をインポートし、{ Component 、 createContext } を 'react' から取得します。
エクスポートデフォルトクラスCmp2はComponentを拡張します{
  // デフォルトデータのみ取得 --> プロバイダーコンポーネントにラップされていません static contextType = createContext
  与える() {
    戻る (
      <div>
        <button onClick={this.setCount.bind(this)}>データの自動増加</button>
      </div>
    )
  }
  setCount() {
    this.context.setCount()
  }
}

ブラザーCmp1

<消費者>
    {
        値 => <h3>{value.count}</h3>
    }
</消費者>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • React親子コンポーネント通信実装方法
  • Reactにおけるネストされたコンポーネントとネストされたコンポーネント間の通信プロセス
  • Reactコンポーネント通信の例
  • コンポーネント間の内部通信のReactデータ転送方法
  • Reactにおけるコンポーネント通信のいくつかの方法の詳細な説明
  • React 開発チュートリアル: React コンポーネント間の通信
  • Reactにおけるコンポーネント通信の問題の詳細な説明
  • Reactコンポーネント間の通信のサンプルコード
  • React コンポーネント間で通信する 3 つの方法 (シンプルで使いやすい)

<<:  マークアップ言語 - テキストの CSS スタイルを指定する

>>:  Xmeter APIインターフェーステストツールの使用状況の分析

推薦する

js と jQuery での Ajax の使用例の詳細

目次ネイティブJS GETリクエストの送信方法投稿リクエストの送信方法パラメータ付きのGETリクエス...

Vuex のコアコンセプトと基本的な使用法の詳細な説明

目次導入始めるインストール①直接ダウンロードする方法②CND法③NPM方式④糸法NPMインストールの...

Nginx http を https にアップグレードする手順を完了する

httpとhttpsの違いは一部のウェブサイトでは、http を開くと、安全ではないというメッセージ...

Sqoop エクスポート マップ 100% 削減 0% さまざまな理由と解決策でスタック

私はこのようなバグを典型的な「ハムレット」バグと呼んでいます。これは、「エラーメッセージは同じだが、...

CocosCreator で http と WebSocket を使用する方法

目次1. HTTPGET 2. HTTP POSTウェブソケット4. Egretのhttpとwebs...

ドメイン名を指定されたポートに転送するようにNginxを設定する方法

/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...

JS関数のカリー化の詳細な説明

目次1. 補足知識ポイント: 関数の暗黙的な変換2. 補足知識: call/apply を使って配列...

VUE v-for の :key の詳細な説明

v-for タグにキーが追加されていない場合。 <!DOCTYPE html> <...

XML構文の詳細な説明

1. 文書化ルール1. 大文字と小文字が区別されます。 2. 属性値は引用符(一重引用符または二重引...

MySql で SQL 実行プランをクエリするために explain を使用する方法

explain コマンドは、クエリ オプティマイザーがクエリの実行を決定した方法を確認する主な方法で...

JavaScript ツールチェーンの不完全なガイド

目次概要静的型チェックコードスタイルチェック(Linter)パッケージマネージャーモジュールローダー...

js で虫眼鏡効果を実現するためのアイデアとコード

この記事の例では、虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...

MySQL トリガー: トリガーの作成と使用

この記事では、例を使用して MySQL トリガーの作成と使用について説明します。ご参考までに、詳細は...

Reactのようなフレームワークをゼロから作成する

最近、インターネットで「Build your own React」という記事を見ました。著者は、シン...

CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明

1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...