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

React コンポーネント間の通信は一方向です。データは親から子へ、または子から親へレイヤーごとに渡す必要があります。
兄弟コンポーネントにデータを渡す場合は、まず共通の親にデータを渡し、次に渡す先のコンポーネントの場所にデータを渡す必要があります。
親子関係ではないコンポーネント間でデータを渡すために、このレイヤーごとのデータ転送方法を使用することは推奨されません。代わりに、グローバル状態維持機能モジュール (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の他の関連記事に注目してください。

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