如何使用useContext更改Context的值? [英] How to change the value of a Context with useContext?

问题描述

在React 16.8+中使用 useContext 钩子可以很好地工作.您可以创建一个组件，使用该钩子并利用上下文值，而不会出现任何问题.

我不确定的是如何将更改应用于Context Provider值.

1)useContext钩子严格来说是一种使用上下文值的方法吗?

2)是否有推荐的方法，使用React钩子来更新子组件中的值，然后使用 useContext 钩子在此上下文中触发子组件对任何组件的重新渲染?/p>

  const ThemeContext = React.createContext({风格:轻"可见:正确});函数Content(){const {style，visible} = React.useContext(ThemeContext);const handleClick =()=>{//将上下文值更改为//样式:深色"//可见:false}返回 (< div>< p>主题是< em> {style}</em>可见状态是< em>{visible.toString()}</em></p>< button onClick = {handleClick}>更改主题</button></div>)};函数App(){返回< 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>  

解决方案

  const {createContext，useContext，useState} = React;const ThemeContext = createContext(null);函数Content(){const {style，visible，toggleStyle，toggleVisible} = useContext(主题上下文);返回 (< div>< p>主题是< em> {style}</em>可见状态是< em>{visible.toString()}</em></p>< button onClick = {toggleStyle}>更改主题</button>< button onClick = {toggleVisible}>更改可见性</button></div>);}函数App(){const [style，setStyle] = useState("light");const [visible，setVisible] = useState(true);函数toggleStyle(){setStyle(style =>(style ==="light"?"dark":"light")));}函数toggleVisible(){setVisible(visible =>！visible);}返回 (< ThemeContext.Provider值= {{样式，可见，toggleStyle，toggleVisible}}><内容/></ThemeContext.Provider>);}ReactDOM.render(< App/> ;, document.getElementById("root"));  

 <脚本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>  

Using the useContext hook with React 16.8+ works well. You can create a component, use the hook, and utilize the context values without any issues.

What I'm not certain about is how to apply changes to the Context Provider values.

1) Is the useContext hook strictly a means of consuming the context values?

2) Is there a recommended way, using React hooks, to update values from the child component, which will then trigger component re-rendering for any components using the useContext hook with this context?

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>

解决方案

How to update context with hooks is discussed in the How to avoid passing callbacks down? part of the Hooks FAQ.

The argument passed to createContext will only be the default value if the component that uses useContext has no Provider above it further up the tree. You could instead create a Provider that supplies the style and visibility as well as functions to toggle them.

Example

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>

这篇关于如何使用useContext更改Context的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！