useContext를 사용하여 컨텍스트 값을 변경하려면 어떻게 해야 합니까?

useContext를 사용하여 컨텍스트 값을 변경하려면 어떻게 해야 합니까?

사용방법useContext리액트 16.8+의 훅이 잘 작동합니다.구성 요소를 생성하고 후크를 사용하며 컨텍스트 값을 문제 없이 사용할 수 있습니다.

콘텍스트 프로바이더 값에 변경을 적용하는 방법에 대해서는 불명확합니다.

1) use Context 훅은 콘텍스트 값을 소비하는 수단입니까?

2) 리액트 훅을 사용하여 하위 구성 요소에서 값을 업데이트하고, 이 값을 업데이트하면 해당 구성 요소를 사용하여 구성 요소를 다시 렌더링할 수 있는 권장 방법이 있습니까?useContext이 문맥에 접속할 수 있을까요?

const ThemeContext = React.createContext({
  style: 'light',
  visible: true
});

function Content() {
  const { style, visible } = React.useContext(ThemeContext);

  const handleClick = () => {
    // change the context values to
    // style: 'dark'
    // visible: false
  }

  return (
    <div>
      <p>
        The theme is <em>{style}</em> and state of visibility is 
        <em> {visible.toString()}</em>
      </p>
      <button onClick={handleClick}>Change Theme</button>
    </div>
  )
};

function App() {
  return <Content />
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.2/umd/react-dom.production.min.js"></script>

후크를 사용하여 컨텍스트를 업데이트하는 방법은 후크 FAQ의 콜백 전달을 방지하는 방법에 대해 설명합니다.

의론은 에 전달되었다.createContext디폴트값이 되는 것은 가 사용하는 컴포넌트가useContext없다Provider나무 위쪽으로 더 올라가면 돼대신, 다음 명령어를 생성할 수 있습니다.Provider를 공급하다style그리고.visibility기능 및 전환 기능을 제공합니다.

예

const { createContext, useContext, useState } = React;

const ThemeContext = createContext(null);

function Content() {
  const { style, visible, toggleStyle, toggleVisible } = useContext(
    ThemeContext
  );

  return (
    <div>
      <p>
        The theme is <em>{style}</em> and state of visibility is
        <em> {visible.toString()}</em>
      </p>
      <button onClick={toggleStyle}>Change Theme</button>
      <button onClick={toggleVisible}>Change Visibility</button>
    </div>
  );
}

function App() {
  const [style, setStyle] = useState("light");
  const [visible, setVisible] = useState(true);

  function toggleStyle() {
    setStyle(style => (style === "light" ? "dark" : "light"));
  }
  function toggleVisible() {
    setVisible(visible => !visible);
  }

  return (
    <ThemeContext.Provider
      value={{ style, visible, toggleStyle, toggleVisible }}
    >
      <Content />
    </ThemeContext.Provider>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

이 접근방식을 사용할 수 있습니다.네스트된 컴포넌트의 수에 관계없이 정상적으로 동작합니다.

// Settings Context - src/context/Settings
import React, { useState } from "react";

const SettingsContext = React.createContext();

const defaultSettings = {
  theme: "light",
};

export const SettingsProvider = ({ children, settings }) => {
  const [currentSettings, setCurrentSettings] = useState(
    settings || defaultSettings
  );

  const saveSettings = (values) => {
   setCurrentSettings(values)
  };

  return (
    <SettingsContext.Provider
      value={{ settings: currentSettings, saveSettings }}
    >
      {children}
    </SettingsContext.Provider>
  );
};

export const SettingsConsumer = SettingsContext.Consumer;

export default SettingsContext;

// Settings Hook - src/hooks/useSettings
import { useContext } from "react";
import SettingsContext from "src/context/SettingsContext";

export default () => {
  const context = useContext(SettingsContext);

  return context;
};

// src/index
ReactDOM.render(
  <SettingsProvider settings={settings}>
    <App />
  </SettingsProvider>,
  document.getElementById("root")
);

// Any component do you want to toggle the theme from
// Example: src/components/Navbar
const { settings, saveSettings } = useSettings();

const handleToggleTheme = () => {
  saveSettings({ theme: "light" });
};

언급URL : https://stackoverflow.com/questions/54738681/how-to-change-the-value-of-a-context-with-usecontext