如何正确更改 React 上下文值？

Question

假设 i\xe2\x80\x99ve 声明具有以下上下文：

\n

const ColorContext = React.createContext(\xe2\x80\x9c\xe2\x80\x9d)\n

\n

我正在尝试创建一个可以更改上下文值的简单函数，该函数稍后可以在许多其他组件中用作全局状态变量。然而，我实现的函数没有做任何事情来改变上下文值，这就是我所做的，请随时让我知道代码中哪里出错了：

\n

function GlobalContext(){\n\nconst {color, setColor} = useContext(ColorContext);\n\nconst toGreen = () => {\nsetColor(\xe2\x80\x98green\xe2\x80\x99);\n};\n\n return(\n   <>\n    <ColorContext.Provider value={{color, setColor}}>\n    <button onClick={toGreen}> Change Color </button>\n    <ColorContext.Provider/>\n   </>\n )\n}\n

\n

Answer 1

你这样做是错的。useContext用于树中低于上下文提供者的组件。您想要在呈现您的组件中看到的Context.Provider是这样的：

const [color, setColor] = useState();

所以整个事情看起来像这样：

const ColorContext = React.createContext();

const MyColorContextProvider = ({children}) => {

  const [color, setColor] = useState(); 
  const toGreen = () => setColor('green');

  return (
   <ColorContext.Provider value={{color,setColor}}>
      {children}
      <button onClick={toGreen}>Change to Green</button>
   </ColorContext.Provider>
  );
}

进而：

const MyChildComponent = () => {
   const {color} = useContext(ColorContext);

   return <>The color in context is {color}</>
}

您的应用程序可能是：

const App = () => {
  return (
   <MyColorContextProvider>
    <MyChildComponent/>
   </MyColorContextProvider>
  );
}

Stackblitz：https://stackblitz.com/edit/react-gym2ku? file=src%2FColorContextProvider.js