親コンポーネントと子コンポーネント間でパラメータを渡す親コンポーネントは値を子コンポーネントに渡します。これはthis.propsを使用して直接実現できます。 親コンポーネントでは、データを渡す必要がある子コンポーネントにカスタムプロパティを追加し、子コンポーネントでは、this.propsを通じて親コンポーネントから渡されたデータを取得できます。 // 親コンポーネントのrender() { 戻る ( // 渡す必要のあるメソッドまたはパラメータを渡すにはカスタム属性を使用します <ShopUi toson={this.state}></ShopUi> ) } //サブコンポーネント//親コンポーネントから渡されたデータはthis.props.tosonを通じて取得できます 孫コンポーネントに渡す必要がある場合は、子コンポーネントのカスタム属性を介して渡すだけです。 tograndson={this.props.toson} 孫コンポーネントはthis.props.tograndsonを通じてデータを取得します。 子コンポーネントが親コンポーネントに値を渡す場合は、親コンポーネントで受信関数と状態を設定し、関数名を props を通じて子コンポーネントに渡す必要があります。 つまり、親コンポーネントを子コンポーネントに渡し、子コンポーネント内で呼び出す方法である //GrandsonコンポーネントのエクスポートデフォルトクラスGrandsonはComponentを拡張します{ 与える(){ 戻る ( <div style={{border: "1px solid red",margin: "10px"}}> {このプロパティ名}: <onChange を選択={this.props.handleSelect}> <option value="男性">男性</option> <option value="女性">女性</option> </選択> </div> ) } }; //子コンポーネントのエクスポート デフォルトクラス Child extends Component { 与える(){ 戻る ( <div style={{border: "1px solid green",margin: "10px"}}> {this.props.name}: <input onChange={this.props.handleVal}/> <孫の名前="性別" handleSelect={this.props.handleSelect}/> </div> ) } }; //親コンポーネントエクスポートデフォルトクラスParentはComponentを拡張します{ コンストラクタ(props){ スーパー(小道具) this.state={ ユーザー名: ''、 性別: '' } }, ハンドルVal(イベント){ this.setState({ユーザー名: イベントターゲット値}); }, ハンドル選択(値) { this.setState({性別: イベントターゲット値}); }, 与える(){ 戻る ( <div style={{border: "1px solid #000",padding: "10px"}}> <div>ユーザー名: {this.state.username}</div> <div>ユーザーの性別: {this.state.sex}</div> <Child name="名前" handleVal={this.handleVal} handleSelect={this.handleSelect}/> </div> ) } } 少し前に誰かが私にこの質問をしました: コンストラクターでの super() の用途は何ですか? 要約すると: これをサブクラスのコンストラクターで使用する場合は、親クラスのコンストラクターを呼び出す必要があります。そうしないと、これを取得できません。 問題は、親クラスのコンストラクターをどのように呼び出すかということです。 super() 経由 親コンポーネントからコンストラクターに渡されたパラメーターを使用する場合は、親コンポーネントのスーパーを呼び出すときに、親コンポーネントのコンストラクターにパラメーターを渡す必要があります。 コンストラクターで this またはパラメータを使用しない場合、super は必要ありません。React が既に this と props をバインドしています。 ルーティングパラメータインストールnpm install react-router-dom --save-dev ルートを定義する(通常は外側に配置) <ハッシュルーター> <スイッチ> <ルートの正確なパス="/" コンポーネント={Home}/> <ルートの正確なパス="/detail" コンポーネント={Detail}/> </スイッチ> </ハッシュルーター> ページがジャンプするとき <li onClick={el => this.props.history.push({ パス名:'/detail', 状態:{id:3} })} > </li> this.props.history.location を通じて渡されたデータを受け取る ルートパラメータの受け渡しに問題がある可能性があります。つまり、ルートが定義されたときにマウントされたコンポーネントのみが、props 内の位置履歴と一致します。 ルートにマウントされるコンポーネントは通常 Container.js です。通常は UI.js コンポーネントを分離し、クリックしてその中にジャンプします。UI コンポーネントのプロパティには位置履歴の一致はありません。 高レベルコンポーネントwithRouterを使用する必要があります ステータスの改善複数のコンポーネントが共有する必要がある状態を、最も近い共通の親コンポーネントに昇格し、親コンポーネントはそれをpropsを通じて子コンポーネントに配布します。 コンテクストコンポーネントが独自のコンテキストに状態を保存すると、そのコンポーネントの下にあるすべての子孫コンポーネントは、中間コンポーネントを渡すことなくこの状態にアクセスできますが、このコンポーネントの親コンポーネントはアクセスできません。 クラス Index は Component を拡張します { 静的な子コンテキストタイプ = { テーマカラー: PropTypes.文字列 } コンストラクタ(){ 素晴らしい() this.state = { テーマカラー: '赤' } } 子コンテキストを取得する() { 戻り値: this.state.themeColor } } 与える () { 戻る ( <div> <ヘッダー /> <メイン /> </div> ) } } getChildContext() を介してすべての子孫コンポーネントにプロパティを渡すことによってコンテキストを提供するコンポーネントは、コンテキストの宣言と検証として childContextTypes を提供する必要があります。 クラス Title は Component を拡張します { 静的コンテキストタイプ = { テーマカラー: PropTypes.文字列 } 与える () { 戻る ( <h1 style={{ color: this.context.themeColor }}>タイトル</h1> ) } } サブコンポーネントがコンテキスト内のコンテンツを取得する場合、取得する必要がある状態のタイプを宣言して検証するために contextTypes を記述する必要があります。これも必須です。記述しないと、コンテキスト内の状態を取得できません。 reduxの紹介ReduxはReactに予測可能な状態管理メカニズムを提供します Reduxはアプリケーション全体の状態をストアに保存し、ストアには状態ツリーが格納されます。 コンポーネントは、他のコンポーネントに直接通知する代わりに、ストアにアクションをディスパッチできます。 他のコンポーネントは、ストア内の状態をサブスクライブすることでビューを更新できます。 React でパラメータを渡すいくつかの方法についての記事はこれで終わりです。React でパラメータを渡すことについてのより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: CentOS7 から CentOS8 にアップグレードする方法 (詳細な手順)
目次序文ネットワーク速度のフロントエンド判定原理のまとめ1. img を読み込むか Ajax リクエ...
データベースマルチテーブル接続クエリの実装方法の詳細説明結合演算子を使用して複数のテーブルクエリを実...
公式ドキュメント: https://dev.mysql.com/doc/refman/5.7/en/...
序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...
1. CentOS 7 仮想マシンを開きます。 2. 仮想マシンにログインし、リストにないユーザー名...
この CSS リセットは、Eric Meyers の CSS リセットに基づいて変更されており、特に...
参考までに、Vue3でナビゲーションバーコンポーネントをカプセル化し、スクロールバーのスクロールに合...
この記事で説明する等幅レイアウトでは、純粋な CSS を使用して、要素の幅を手動で設定することなく、...
Vueバスの簡単な使い方シナリオの説明:コンポーネント A にはコンポーネント B と C が含まれ...
目次1. はじめに2. アイデアファイルをアップロードする2つの方法3. ライフサイクル4. コード...
目次1. セットアップ1. セットアップ関数の最初のパラメータ - props 2. 文脈2. セッ...
目次序文根拠手順1. CDから仮想マシンを起動する2. GPartedツールを使用してパーティション...
1. データベースにログインするには、rootユーザーを使用することをお勧めします。 mysql -...
DockerでRedisをデプロイするまずLinuxにDockerをインストールし、次にDocker...
Nginx を設定する 3 つの方法最初の方法は、位置一致部分を直接置き換える。 2 番目の pro...