如何使用上下文API将一个状态和函数传递给多个不同的组件？

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

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  render() {
    return (
      // 提供上下文值
      <MyContext.Provider value={{ count: this.state.count, incrementCount: this.incrementCount }}>
        <ChildComponent1 />
        <ChildComponent2 />
      </MyContext.Provider>
    );
  }
}

// 子组件1
class ChildComponent1 extends React.Component {
  render() {
    return (
      // 访问上下文值
      <MyContext.Consumer>
        {context => (
          <div>
            <p>Count: {context.count}</p>
            <button onClick={context.incrementCount}>Increment</button>
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}

// 子组件2
class ChildComponent2 extends React.Component {
  render() {
    return (
      // 访问上下文值
      <MyContext.Consumer>
        {context => (
          <div>
            <p>Count: {context.count}</p>
            <button onClick={context.incrementCount}>Increment</button>
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}

// 渲染父组件
ReactDOM.render(<ParentComponent />, document.getElementById('root'));