React.js のコンテキスト

Props は React コンポーネントに渡される引数です。React では、props を使用して親コンポーネントから子コンポーネントにデータを転送します。場合によっては、親コンポーネントから孫コンポーネントにデータを渡す必要があり、必要に応じて孫コンポーネントにリッチになるまで、コンポーネントのすべてのステップで小道具を書き留めなければなりません。たくさんの執筆小道具。

データを段階的に転送するのではなく、孫コンポーネントに直接転送する方法があります。1 つの方法は React-Redux です。これは、ストアを作成し、そのストアで重要なデータを収集し、ストア内の任意のデータを必要なコンポーネントに使用する方法です。

別の方法は、コンテキストを使用することです。つまり、基本的に新しいコンポーネントを作成します。この新しいコンポーネントには、値として追加するすべてのデータがあり、このコンポーネントを他のコンポーネントに囲みます。このようにして、その価値を周囲のコンポーネントと共有することができます。

この概念を例で説明しましょう。

その例は、コンセプトを非常にうまくスムーズに説明している YouTube ビデオから取りました。

この例では、名前、価格、ID を持つ 3 つの映画を含む映画配列があります。このアプリでは、これらの機能をブラウザで表示します。

下の写真では、アプリフォルダーがあり、3 つのコンポーネントがそのフォルダーに属しており、MovieProvider でそれらをまとめています。

<動画提供者>

<Nav />

この MovieProvider については後で説明します。

src 内に MovieContext.js ファイルを作成しました。このファイルは基本的に、すべてのムービーデータを useState で保存します。

このファイルにはすべてのムービーが含まれていますが、小道具機能を使用せずに他のコンポーネントでこれらのムービーを使用するにはどうすればよいでしょうか?

まず、react から createContext をインポートする必要があります。

次に、これを 4 行目のように const MovieContext で強化します。

他のコンポーネントでこれを使用する必要があるため、これをエクスポートしています。

また、すべての映画を返す MovieProvider 機能もあります。

<MovieContext.Provider value={[movies, setMovies]} >

{props.children}

</MovieContext.Provider value={[movies, setMovies]} >

MovieContext.Provider は子コンポーネントにデータを渡す方法です。最初にコンテキストを作成し、次にプロバイダーオブジェクトをそれに適用して、この <movieContect.Provider が持つすべての子に適用します。

useContext の概念を見てみましょう。

下の写真でわかるように、App コンポーネントに属する MovieList コンポーネントがあります。このコンポーネントには、実行できるすべてのムービー、movies.map、および各ムービーの <Movie /> が必要です。成分、

では、すべてのムービーを MovieContext からこのコンポーネントにどのように持ってくるのでしょうか。

そのため、useContext 関数を使用して MovieContext をインポートし、すべてのムービーを MovieList コンポーネントに取り込みます。これを行うと、MovieContext.Provider 内のすべての値が MovieList コンポーネントに渡され、

11行目で、これで映画に署名します

const [movies, setMovies] = useContext(MovieContext)

残りは 16 行目で行い、各移動の個別のコンポーネントを取得します。

ここで useContext を使用する別のコンポーネントを下の図に示すために、Nav.js コンポーネントがあり、これも App.js に属しています。MovieList コンポーネントで行ったのと同じルールを適用し、useContext をインポートして行を適用します。 useContext で 8。