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 最適化の経験の共有
複雑な表を作成するには HTML を使用します。複雑なテーブルでは通常、td の rowspan 属...
圧縮版の記事ではデータの初期化がされていないなどいくつか問題があったため、Windows にインスト...
JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化する...
1. Dockerはローカルイメージをインポートする場合によっては、イメージをローカルまたは別の友人...
目次序文webpack-deb サーバーwebpack-dev-server 起動エラー解決策1解決...
開発プロセス中に、MySQL データベースを復元した後にデータベース データに文字化けが発生した場合...
さて、質問させてください。MySQL で列を int(0) に設定すると何が起こりますか?この問題を...
起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがありま...
Linux では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...
チャンクファイブフリータイプファミリーCuprum JAH I フリーフォントイェセヴァブークレフィ...
スクリプトをデバッグモードで実行するbash -x <script> を使用すると、スク...
文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...
1. 同じタイプの空の要素を追加し、要素の CSS 属性 clear:both; を設定します。 ...
従来の Linux イメージで作成された ECS クラウド サーバーには、NTP と YUM が設定...
rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...