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 にアップグレードする方法 (詳細な手順)

推薦する

MySQLの自動増分IDについて知っておくべきこと

はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...

Linux サーバーのグラフィック カードのクラッシュの解決策

ログインインターフェースの解像度が特に大きい場合、グラフィカルインターフェース全体が特に大きくなり、...

コンテンツ領域の周囲を回転する CSS 動的グラデーション ボーダーの効果 (サンプル コード)

レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...

Vue プロジェクト @change 複数のパラメータを使用して複数のイベントを渡す

まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...

JavaScriptの信頼性の低い未定義

undefined JavaScript では、値が undefined かどうかを判断したい場合は...

Linux でユーザーをグループに追加する 4 つの方法の概要

序文Linux グループは、Linux でユーザー アカウントを管理するために使用される組織単位です...

Vueプロジェクトでコンポーネントをカプセル化する簡単な手順

目次序文Toastコンポーネントをカプセル化する方法ユースケース具体的な実装要約する序文ビジネスが発...

axios リクエストのカプセル化に基づく Vue アプリケーションのサンプルコード

目次axiosとは何ですか? Axios リクエストタイプ? Axiosはデフォルトのカスタム構成を...

Linuxコマンドをバックグラウンドで実行する方法

通常、ターミナルでコマンドを実行する場合、別のコマンドの入力を開始する前に、現在のコマンドが終了する...

mysqldumpデータエクスポートの問題に関する詳細な議論

1. mysqldump の使用時にエラー (1064) が報告されます。これは、mysqldump...

MySql ストアド プロシージャ パラメータの初歩的な使用法の詳細な説明

パラメータでのストアドプロシージャの使用IN パラメータは、プロシージャに情報を渡すためにのみ使用さ...

Nexus をベースに Alibaba Cloud プロキシ ウェアハウスを構成するプロセスの分析

Nexus のデフォルトのリモートリポジトリは https://repo1.maven.org/ma...

CSS 3.0とビデオを組み合わせることでクリエイティブなオープニング効果を実現

CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...

Vue マルチ選択リスト コンポーネントの詳細な説明

マルチ選択は、すべてのオプションを一覧表示し、ユーザーが Ctrl/Shift キーを使用して複数選...