Reactはいくつかの方法でパラメータを渡します

Reactはいくつかの方法でパラメータを渡します

親コンポーネントと子コンポーネント間でパラメータを渡す

親コンポーネントは値を子コンポーネントに渡します。これは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 を記述する必要があります。これも必須です。記述しないと、コンテキスト内の状態を取得できません。
Title は文字列である themeColor を取得する必要があるため、contextTypes で宣言します。

reduxの紹介

ReduxはReactに予測可能な状態管理メカニズムを提供します

Reduxはアプリケーション全体の状態をストアに保存し、ストアには状態ツリーが格納されます。

コンポーネントは、他のコンポーネントに直接通知する代わりに、ストアにアクションをディスパッチできます。

他のコンポーネントは、ストア内の状態をサブスクライブすることでビューを更新できます。

React でパラメータを渡すいくつかの方法についての記事はこれで終わりです。React でパラメータを渡すことについてのより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Reactコンポーネント間のパラメータ受け渡し(詳細説明)
  • React onClickにパラメータを渡す問題について話しましょう

<<:  phpstudy をインストールした後に MySQL を起動できない問題に対する完璧なソリューション (元のデータベースを削除する必要はなく、設定を変更する必要もなく、ポートを変更する必要もありません) 直接共存

>>:  CentOS7 から CentOS8 にアップグレードする方法 (詳細な手順)

推薦する

JavaScript でネットワーク速度をテストする方法

目次序文ネットワーク速度のフロントエンド判定原理のまとめ1. img を読み込むか Ajax リクエ...

データベースマルチテーブル接続クエリの実装方法の詳細説明

データベースマルチテーブル接続クエリの実装方法の詳細説明結合演算子を使用して複数のテーブルクエリを実...

MySQL 外部キー制約の詳細な説明

公式ドキュメント: https://dev.mysql.com/doc/refman/5.7/en/...

Ubuntu で XFS ファイルシステム用の LVM を作成する方法

序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...

システム CD をマウントして yum ウェアハウスを構築する VMware 15.5 バージョンのグラフィック チュートリアル

1. CentOS 7 仮想マシンを開きます。 2. 仮想マシンにログインし、リストにないユーザー名...

HTML 5 スタイルシートのリセット

この CSS リセットは、Eric Meyers の CSS リセットに基づいて変更されており、特に...

Vue3ナビゲーションバーコンポーネントのカプセル化実装方法

参考までに、Vue3でナビゲーションバーコンポーネントをカプセル化し、スクロールバーのスクロールに合...

CSS を使用して複数の方法で等幅レイアウトを実装するサンプルコード

この記事で説明する等幅レイアウトでは、純粋な CSS を使用して、要素の幅を手動で設定することなく、...

Vueバスの簡単な使い方

Vueバスの簡単な使い方シナリオの説明:コンポーネント A にはコンポーネント B と C が含まれ...

Vueはアップロードコンポーネントを実装します

目次1. はじめに2. アイデアファイルをアップロードする2つの方法3. ライフサイクル4. コード...

Vue3 ドキュメント クイックスタート

目次1. セットアップ1. セットアップ関数の最初のパラメータ - props 2. 文脈2. セッ...

Vmvare 仮想マシンを使用して Ubuntu のルート ディレクトリをパーティション分割する方法の紹介

目次序文根拠手順1. CDから仮想マシンを起動する2. GPartedツールを使用してパーティション...

MySQL 8.0.18はデータベースにユーザーを追加し、権限を付与します

1. データベースにログインするには、rootユーザーを使用することをお勧めします。 mysql -...

DockerでRedisをデプロイして起動する方法

DockerでRedisをデプロイするまずLinuxにDockerをインストールし、次にDocker...

Nginx ルーティング転送とリバースプロキシロケーション構成の実装

Nginx を設定する 3 つの方法最初の方法は、位置一致部分を直接置き換える。 2 番目の pro...