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

Question

Say i've declared have the following context:

const ColorContext = React.createContext(“”)

I am trying to create a simple function that can change the value of the context, which can later be used in a number of other components as a global state variable. The function i've implemented however is not doing anything to change the context value, here is what i've done, feel free to let me know where I am going wrong in the code:

function GlobalContext(){

const {color, setColor} = useContext(ColorContext);

const toGreen = () => {
setColor(‘green’);
};

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

Answer 1

You're doing it wrong. useContext is for use in components lower in the tree than the Context's Provider. What you want in the component that renders your Context.Provider is this:

const [color, setColor] = useState();

So the whole thing would look something like this:

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>
  );
}

and then:

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

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

your app could be:

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

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

Answer 2

1. toGreen() is passed as an argument to the value of ColorContext
2. Any Nested Component can use toGreen() to change the color

// Created a New Context for global use
const ColorContext = createContext();

export default function GlobalContext() {
  // I set the value of color to red using array destructuring
  const [color, setColor] = useState('Red');

  const toGreen = () => {
    // I set the color to green when this function is called
    setColor('Green');
  }

  return (
    <div>
      {/* I pass the both the color and the toGreen function as args, now they can be accessed by all nested components */}
      <ColorContext.Provider value= {{color, toGreen}}>
        <h1>Current Color is : {color}</h1>
        <NestedComponent />
      </ColorContext.Provider>
    </div>
  );
}

// I created a nested component
function NestedComponent() {
  // useContext lets us access the values passed to ColorContext
  const colorProvider = useContext(ColorContext);
  return (
    // When button is Clicked the toGreen function passed down is triggered
    <button onClick={colorProvider.toGreen}>Change Color from {colorProvider.color} to Green</button>
  );
}

Explanation and Code in Code Sandbox Hope it helps