Hook - useContext

6347 ワード

React useContext reactHook テキストリンク

props drilling

親のすべてのデータを下部にある子を介して最下位の構成部品に渡す必要がある場合は、propsを中間を通過する構成部品に渡す必要があります.
=>不要な中間素子にPropsを提供する場合は、propを修正するときに入力propの位置を変更する必要があります.

ドリル解决方法！

useContext

contextのproviderを作成し、サブコンポーネントにデータを渡します.

外部構成部品に配置する場合はexport、importを使用します

DOMのように、Providerでデータを受信し、書き込むコンポーネントを包みます

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

=>親コンポーネントには、React.createContext()を介して下げたいcontextを含め、ThmeContextに入れる
=>.Provider value={내려줄 context}貼れ!!

//Toolbar
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

//TemedButton
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

=>ThemeContextを使用する構成部品でuseContext()を使用すればよい.
---

공부하며 정리&기록하는 ._. 씅로그

Reference

この問題について(Hook - useContext), 我々は、より多くの情報をここで見つけました https://velog.io/@sseung-i/ReactHook-useContext

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

3(grid)

[WP]モノトーン管理デバッグ