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 最適化の経験の共有

推薦する

HTML テーブルに複雑なテーブル ヘッダーを実装するためのサンプル コード

複雑な表を作成するには HTML を使用します。複雑なテーブルでは通常、td の rowspan 属...

MySQL 圧縮パッケージ版 zip インストール設定方法

圧縮版の記事ではデータの初期化がされていないなどいくつか問題があったため、Windows にインスト...

JavaScript は setTimeout を使用してカウントダウン効果を実現します

JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化する...

Docker でローカルにイメージをインポート/保存/読み込み/削除する方法

1. Dockerはローカルイメージをインポートする場合によっては、イメージをローカルまたは別の友人...

ローカルサーバーを構築するためのwebpack-dev-serverの実装

目次序文webpack-deb サーバーwebpack-dev-server 起動エラー解決策1解決...

Linux で MySQL のデフォルト エンコーディングを変更する方法

開発プロセス中に、MySQL データベースを復元した後にデータベース データに文字化けが発生した場合...

MySQL 数値型オーバーフローの処理方法

さて、質問させてください。MySQL で列を int(0) に設定すると何が起こりますか?この問題を...

WeChatアプレットで画像の幅と高さを取得する方法

起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがありま...

Linuxでシンボリックリンクを削除(削除)するコマンド

Linux では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...

最高の無料英語フォント33選を紹介

チャンクファイブフリータイプファミリーCuprum JAH I フリーフォントイェセヴァブークレフィ...

bash のスクリプトデバッグメカニズムの詳細な説明

スクリプトをデバッグモードで実行するbash -x <script> を使用すると、スク...

Docker で Ubuntu に Python3 と Pip をインストールする際の問題

文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...

フローティングをクリアするいくつかの方法(推奨)

1. 同じタイプの空の要素を追加し、要素の CSS 属性 clear:both; を設定します。 ...

歴史的な Linux 画像処理および修復ソリューション

従来の Linux イメージで作成された ECS クラウド サーバーには、NTP と YUM が設定...

Linux コマンドラインからファイルを削除する実用的な方法

rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...