親コンポーネントと子コンポーネント間でパラメータを渡す親コンポーネントは値を子コンポーネントに渡します。これは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 にアップグレードする方法 (詳細な手順)
はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...
ログインインターフェースの解像度が特に大きい場合、グラフィカルインターフェース全体が特に大きくなり、...
レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...
Windows 2003+IIS6 の fastcgi 構成ファイル fcgiext.ini を最適...
まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...
undefined JavaScript では、値が undefined かどうかを判断したい場合は...
序文Linux グループは、Linux でユーザー アカウントを管理するために使用される組織単位です...
目次序文Toastコンポーネントをカプセル化する方法ユースケース具体的な実装要約する序文ビジネスが発...
目次axiosとは何ですか? Axios リクエストタイプ? Axiosはデフォルトのカスタム構成を...
通常、ターミナルでコマンドを実行する場合、別のコマンドの入力を開始する前に、現在のコマンドが終了する...
1. mysqldump の使用時にエラー (1064) が報告されます。これは、mysqldump...
パラメータでのストアドプロシージャの使用IN パラメータは、プロシージャに情報を渡すためにのみ使用さ...
Nexus のデフォルトのリモートリポジトリは https://repo1.maven.org/ma...
CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...
マルチ選択は、すべてのオプションを一覧表示し、ユーザーが Ctrl/Shift キーを使用して複数選...