反応におけるコンテキストの使用法は何ですか

react では、コンテキストを使用してデータを共有し、世代を超えてデータを渡すことができます。コンテキストは、コンポーネント ツリーをレイヤーごとにプロップを明示的に渡すことなく、コンポーネント間でデータを共有する新しい方法を提供します。値を渡すために多数の繰り返し props を使用することを回避できます。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react でのコンテキストの使用法とは何ですか

コンテキストはコンポーネント間でデータを共有する新しい方法を提供し、コンポーネント ツリー層を明示的に通過することなくデータを世代から世代へと受け渡すことができます。レイヤーごとに小道具を渡します。

Context は、コンポーネント ツリーのレイヤーを通じて明示的に props を渡すことなく、コンポーネント間で値を共有する方法を提供します。値の取得と値の使用のレベルが大きく離れている場合、または値を使用する必要があるコンポーネントが多数で分散している場合は、Context を使用してデータを共有し、値を渡すために多数の繰り返し props を使用することを避けることができます。この値を使用する必要があるコンポーネントが 1 つだけの場合は、値が生成される場所でコンポーネントを生成し、その後、props を使用してそれをコンポーネントが実際に表示される場所にレイヤーごとに渡すことができます。

基本的な使用法

1. カスタム コンテキスト

import React from 'react';
 
const ThemeContext = React.createContext('light');
 
export default ThemeContext;

上記のコードは ThemeContext を定義しており、デフォルト値は「light」です。 '。

2. 必要に応じてコンテキスト プロバイダーを使用する

import ThemeContext from './context/ThemeContext.js';
import ThemedButton from './ThemedButton.js';
import './App.css';
 
function App() {
  return (
    <ThemeContext.Provider value=&#39;dark&#39;>
      <div className="App">
        <header className="App-header">
          <ThemedButton />
        </header>
      </div>
    </ThemeContext.Provider>
  );
}
 
export default App;

コンポーネントの最外層でカスタム コンテキスト プロバイダーを使用すると、受信した値がデフォルト値をオーバーライドします。サブコンポーネントによって読み取られる ThemeContext の値は、デフォルト値「light」ではなく「dark」です。プロバイダーに値の定義がある場合、値の値が使用されます (値が未定義である場合、つまり値が渡されない場合でも)。定義のデフォルト値は、プロバイダーが値の定義を提供していない場合にのみ使用されます。それ。

3. contextType を定義し、取得した Context の値を使用します

import React, { Component } from 'react';
import ThemeContext from "./context/ThemeContext.js";
 
class ThemedButton extends Component {
static contextType = ThemeContext;
render() {
return <button>{this.context}</button>;
}
}
 
export default ThemedButton;

ThemedButton は contextType が ThemeContext であると宣言するため、this.context の値は最も近い ThemeContext になります指定された値は「light」です。

レンダリング:

推奨学習: 「react ビデオ チュートリアル 」

以上が反応におけるコンテキストの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。