Reactはconetxtを通じてマルチコンポーネント値転送関数を実装します

Reactはconetxtを通じてマルチコンポーネント値転送関数を実装します

この関数の効果はvue的provide/injectに似ています。
contextを通じて反応できる

ここに画像の説明を挿入

パブリックファイルcontext/Theme.jsxを定義する

'react' から {createContext} をインポートします。
const テーマ = createContext()
デフォルトテーマをエクスポート

親コンポーネントはパブリックファイルと子コンポーネントをインポートし、 theme值を渡します。

React をインポートし、{useState} を 'react' から取得します。
「@/components/Child.jsx」からChildをインポートします。
「@/context/Theme.jsx」からテーマをインポートします。
エクスポートデフォルト()=> {
    const [theme, setTheme] = useState("blue")
    戻る (
        <>
            <button onClick={() => setTheme("green")}>コンテキストがレスポンシブかどうかを確認する</button>
            <Theme.Provider 値 = {テーマ}>
                <子供 />
            </テーマ.プロバイダー>
        </>
    )
}

子コンポーネントがデータを取得するcomponents/Child.jsx

'react' から React をインポートします。
「@/context/Theme.jsx」からテーマをインポートします。
エクスポートデフォルト()=> {
    戻る (
        <テーマ.消費者>
            {data => <p>親コンポーネントのコンテキストから渡された値を受け取ります: {data}</p>}
        </Theme.Consumer>
    );
}

これで、conetxt による React のマルチコンポーネント値転送についての説明は終了です。React のマルチコンポーネント値転送の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Reactコンポーネントの値の受け渡しの関係の詳細な説明
  • Reactコンポーネントで値を渡す3つの方法
  • Vue と React コンポーネント間の値の転送の詳細な説明
  • 親コンポーネントと子コンポーネント間で値を渡すReactメソッド
  • Reactの子コンポーネントは親コンポーネントに値を転送します

<<:  フロントエンドが習得すべき、複数列の等高レイアウトを実現するための CSS テクニック

>>:  HTML フォームタグチュートリアル (4):

推薦する

Vueはフィルターを使用して日付をフォーマットします

この記事では、フィルターを使用して日付をフォーマットするVueの具体的なコードを参考までに紹介します...

Pythonの関数知識についての簡単な説明

目次関数パラメータの2つの主要なカテゴリ位置パラメータ可変長パラメータ名前空間要約する関数パラメータ...

MySQL の遅いクエリの最適化方法と最適化の原則

1. 日付のサイズを比較するには、XML に渡される日付形式は 'yyyy-MM-dd...

MySql 学習 3 日目: データ テーブル間の接続とクエリの詳細

主キー:キーワード: 主キー機能: null にすることはできず、一意である必要があります。主キーの...

40 CSS/JSスタイルと機能的な技術処理

1-ドロップダウン選択ボックスのスタイル設定 - ドロップダウン リストを変更します。 2- <...

MAC で Mysql5.7.10 のルートパスワードを変更する方法

まず、MySQLをskip-grant-tablesモードで起動します: mysqld --skip...

同じページを動的にロードするための Vue ルーティングリスニングの例

目次シナリオ分析発達要約するシナリオ分析システムでは、1 つのモジュールに 3 つのサブモジュールが...

Vue プロジェクトがページング効果を実現

ページング効果は、参考までにvueプロジェクトに実装されています。具体的な内容は次のとおりです。 1...

Linux システム修復モード (シングル ユーザー モード)

目次序文1. シングルユーザーモードでの一般的なバグ修正2. シングルユーザーモードでシステムパスワ...

MySQL テーブル自動増分 ID オーバーフロー障害レビュー ソリューション

問題: MySQLテーブル内の自動増分IDのオーバーフローによりビジネスブロックが発生した背景: t...

Dockerをクリーンアンインストールする方法の詳細な説明

まず、サーバー環境情報: アンインストールの理由:しばらくするとホストマシンのディスクが100%にな...

Vue は PC カメラを呼び出してリアルタイムで写真を撮る機能を実装します

VueはPCカメラを呼び出してリアルタイムで写真を撮影します。参考までに、具体的な内容は次のとおりで...

MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法を参考ま...

Vue+js 矢印をクリックして画像を切り替える

この記事の例では、矢印をクリックして画像を切り替えるVue + jsの具体的なコードを共有しています...

Mysql マスタースレーブ サービスの実装例を構成する

Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...