Reactの親コンポーネントと子コンポーネント間のデータ転送の詳細な説明

Reactの親コンポーネントと子コンポーネント間のデータ転送の詳細な説明

React フレームワーク コンポーネント間のデータ転送の知識ポイントを学習する前に、いくつかの使用原則を明確にする必要があります。

  1. React コンポーネント間の通信は一方向です。データは親から子へ、または子から親へレイヤーごとに渡す必要があります。
  2. 兄弟コンポーネントにデータを渡す場合は、まず共通の親にデータを渡し、次に渡す先のコンポーネントの場所にデータを渡す必要があります。
  3. 親子関係ではないコンポーネント間でデータを渡すために、このレイヤーごとのデータ転送方法を使用することは推奨されません。代わりに、グローバル状態維持機能モジュール (Redux) を使用することを選択します。

1. 親コンポーネントが子コンポーネントにデータを渡す

親コンポーネントは、親コンポーネント内で子コンポーネントを参照する際に、転送するデータのプロパティを子コンポーネントタグに設定することで子コンポーネントにデータを渡し、子コンポーネントは this.props を通じて渡されたデータを受け取ります。これにより、親コンポーネントから子コンポーネントへのデータ転送が実現されます。

1.1. 親コンポーネントコード

React をインポートします。{ コンポーネント } から 'react' をインポートします。
'./App.css' をインポートします。
'./child' から子をインポートします
クラスAppはComponentを拡張します{
    コンストラクタ(props){
        スーパー(小道具);
        this.state={
            メッセージ: '親クラスのメッセージ',
            名前:「ジョン」
            年齢:99
        }
    }
    コールバック=(メッセージ,名前,年齢)=>{
        // setState メソッド、msg の値を変更します。値は子から渡されます this.setState({msg});
        this.setState({name});
        this.setState({age});
    }
  与える() {
    戻る (
      <div className="アプリ">
        <p> メッセージ: {this.state.msg}</p>
        <子コールバック={this.callback} 年齢={this.state.age} 
name={this.state.name}></Child>
      </div>
    );
  }
}
デフォルトのアプリをエクスポートします。

コードの説明: 親コンポーネントが子コンポーネント (Child) を使用する場合、2 つのプロパティ (age と name) と 1 つのメソッド (現時点ではコールバックは考慮されていません) を子コンポーネントに転送します。

キーコード:

<子供の名前={this.state.name} 年齢={this.state.age}></子供>

1.2. サブコンポーネントコード

「react」からReactをインポートします。
クラスChildはReact.Componentを拡張します{
    コンストラクタ(props){
        スーパー(小道具);
        this.state={
            名前:「アンディ」
            年齢:31歳
            msg:"サブクラスからのメッセージ"
        }
    }
    変更=()=>{
        this.props.callback(this.state.msg、this.state.name、this.state.age);
    }
    与える(){
        戻る(
            <div>
                <div>{this.props.name}</div>
                <div>{this.props.age}</div>
                <button onClick={this.change}>クリック</button>
            </div>
        )
    }
}
デフォルトの子をエクスポートします。

コードの説明: 子コンポーネントでは、this.props がレンダリングで直接使用され、親コンポーネントによって送信されたデータを受け入れて直接使用します。子コンポーネントが this.setSate を使用して受信したデータを処理することは推奨されません。

キーコード:

<div>{this.props.name}</div>
<div>{this.props.age}</div>

2. サブコンポーネントは親コンポーネントにデータを転送する

React フレームワークでは、子コンポーネントから親コンポーネントへのデータ転送は、親コンポーネントから子コンポーネントへのデータ転送に依存します。実際には、親コンポーネントは自身のスコープの関数を子コンポーネントに転送し、子コンポーネントはその関数を呼び出して、送信するデータを関数パラメータの形式で親コンポーネントに転送します。

2.1. 親コンポーネントコード

上記のコード例では、関数は親コンポーネントで定義され、子コンポーネントに転送されます。

クラスAppはComponentを拡張します{
......
    コールバック=(メッセージ,名前,年齢)=>{
        // setState メソッド、msg の値を変更します。値は子から渡されます this.setState({msg});
        this.setState({name});
        this.setState({age});
    }
  与える() {
    戻る (
      <div className="アプリ">
        <子コールバック={this.callback}></子>
      </div>
    );
  }
}
デフォルトのアプリをエクスポートします。

親コンポーネントは、自身のスコープの関数を子コンポーネントに渡します。子コンポーネントがthis.propsを通じてこの関数を呼び出すと、パラメータを通じてグループ コンポーネントにデータが転送されます。
ここで、親コンポーネントには msg、name、age の 3 つのパラメーターがあります。子コンポーネントがデータを転送した後、親コンポーネントはthis.setStateを使用してデータを処理します。

2.2. サブコンポーネントコード

子コンポーネントは、this.props を使用して親コンポーネントから送信された関数を受け取り、パラメータ メソッドを通じてこの関数を呼び出して、親コンポーネントにデータを送信します。

クラスChildはReact.Componentを拡張します{
......
    変更=()=>{
        this.props.callback(this.state.msg、this.state.name、this.state.age);
    }
    与える(){
        戻る(
            <div>
                <button onClick={this.change}>クリック</button>
            </div>
        )
    }
}
デフォルトの子をエクスポートします。

子コンポーネントにメソッドchange()が作成され、クリック イベントonClickにバインドされます。change change()メソッドはthis.props.callback()関数 (親コンポーネントから送信された関数) を呼び出します。関数の実際のパラメーターは、子コンポーネントから親コンポーネントに送信されたデータです。

以上がReact親コンポーネントと子コンポーネント間のデータ転送の詳細な説明です。React親コンポーネントと子コンポーネント間のデータ転送の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • React Native が「NSArray<id<RCTBridgeModule>>型のパラメータを初期化できません」というエラーを報告する (解決方法)
  • Reactの基本のまとめ
  • Reactにおけるキーの役割の詳細な説明
  • React 入門レベルの詳細なメモ

<<:  Linux で誤って削除したメッセージ ファイルを復元する方法

>>:  MySQL ページング中にオフセットが大きすぎる場合の SQL 最適化の経験の共有

推薦する

CentOS 7 での mysql 5.7 のインストール チュートリアル

1. 公式MySQL Yumリポジトリをダウンロードしてインストールする 実行ファイル: mysql...

モバイルレイアウト用の動的REMの実装

ダイナミックレム1. まず、現在の長さの単位を紹介しましょうpx em Mの幅 / 漢字の幅 1em...

IE6/7 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法

1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...

CSSを使用してTDのINPUTの幅を設定する

最近、C# を使用して Web プログラムを作成していたときに、次のような問題が発生しました。 Te...

element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...

JavaScript で大きなファイルの並列ダウンロードを実装する方法

目次1. HTTP範囲リクエスト1.1 範囲構文2. 大きなファイルをダウンロードする方法2.1 補...

Vue3 のウォッチの使用方法とベストプラクティスガイド

目次序文🌟 1. APIの紹介2. 複数のデータソースの監視3. リスニングアレイ4. 監視対象5....

Oracle の MySQL バージョンでユーザー Scott のテーブル ステートメントを作成する例

概要: Oracle scottユーザーには4つのテーブルがあり、実験やデータ検証に便利です。現在は...

MySQLテクノロジーにおけるInnoDBロックの詳細な説明

目次序文1. ロックとは何ですか? 2. InnoDBストレージエンジンのロック2.1 ロックの種類...

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

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

jsを使用してシンプルなカルーセル効果を実現する

この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...

MySQLリモート接続失敗の解決策

以前、MySQLがローカルでは接続できるのにリモートでは接続できないという問題に遭遇したことがありま...

vue-element-admin プロジェクトのインポートとエクスポートの実装

vue-element-admin インポートコンポーネントのカプセル化テンプレートとスタイルまず、...

VUE+Canvasはデスクトップピンボールブロック破壊ゲームのサンプルコードを実装します

誰もがピンボールやレンガ崩しのゲームをプレイしたことがあるでしょう。左と右のキーを使用して、下にある...