如何使用上下文API更新组件提供程序的状态

// 创建上下文对象
const MyContext = React.createContext();

// 定义状态和方法
const MyProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  // 创建上下文提供程序
  return (
    <MyContext.Provider value={{ count, increment, decrement }}>
      {children}
    </MyContext.Provider>
  );
};

// 在组件中使用上下文
const MyComponent = () => {
  const { count, increment, decrement } = useContext(MyContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

// 在应用中使用上下文提供程序
const App = () => {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
};

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