React フレームワーク コンポーネント間のデータ転送の知識ポイントを学習する前に、いくつかの使用原則を明確にする必要があります。
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> ); } } デフォルトのアプリをエクスポートします。 親コンポーネントは、自身のスコープの関数を子コンポーネントに渡します。子コンポーネントが 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> ) } } デフォルトの子をエクスポートします。 子コンポーネントにメソッド 以上がReact親コンポーネントと子コンポーネント間のデータ転送の詳細な説明です。React親コンポーネントと子コンポーネント間のデータ転送の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux で誤って削除したメッセージ ファイルを復元する方法
>>: MySQL ページング中にオフセットが大きすぎる場合の SQL 最適化の経験の共有
1. 公式MySQL Yumリポジトリをダウンロードしてインストールする 実行ファイル: mysql...
springmvc による Spring の統合Spring 統合 springmvc の web....
ダイナミックレム1. まず、現在の長さの単位を紹介しましょうpx em Mの幅 / 漢字の幅 1em...
1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...
最近、C# を使用して Web プログラムを作成していたときに、次のような問題が発生しました。 Te...
最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...
目次1. HTTP範囲リクエスト1.1 範囲構文2. 大きなファイルをダウンロードする方法2.1 補...
目次序文🌟 1. APIの紹介2. 複数のデータソースの監視3. リスニングアレイ4. 監視対象5....
概要: Oracle scottユーザーには4つのテーブルがあり、実験やデータ検証に便利です。現在は...
目次序文1. ロックとは何ですか? 2. InnoDBストレージエンジンのロック2.1 ロックの種類...
この記事では、例を使用して MySQL トリガーの作成と使用について説明します。ご参考までに、詳細は...
この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...
以前、MySQLがローカルでは接続できるのにリモートでは接続できないという問題に遭遇したことがありま...
vue-element-admin インポートコンポーネントのカプセル化テンプレートとスタイルまず、...
誰もがピンボールやレンガ崩しのゲームをプレイしたことがあるでしょう。左と右のキーを使用して、下にある...