那子组件如何设置值呢

好的，如果你想在子组件中设置值，你需要将这个值传递给子组件，并在子组件中使用 Context.Consumer 来获取 Context 中的数据并进行修改。

以下是一个示例代码：

import React, { createContext, Component } from 'react';

type MyContextType = {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
};

const MyContext = createContext<MyContextType>({
  count: 0,
  setCount: () => {},
});

const ChildComponent = () => {
  return (
    <MyContext.Consumer>
      {(context) => (
        <div>
          <h2>Child Component</h2>
          <p>Count: {context.count}</p>
          <button onClick={() => context.setCount(context.count + 1)}>
            Increment
          </button>
        </div>
      )}
    </MyContext.Consumer>
  );
};

class ParentComponent extends Component {
  state = {
    count: 0,
  };

  setCount = (count: number) => {
    this.setState({ count });
  };

  render() {
    return (
      <MyContext.Provider value={{ count: this.state.count, setCount: this.setCount }}>
        <div>
          <h1>Parent Component</h1>
          <ChildComponent />
        </div>
      </MyContext.Provider>
    );
  }
}

export default ParentComponent;

在这个例子中，我们创建了一个名为 `MyContext` 的 Context 对象，并将它的值设置为一个包含 `count` 和 `setCount` 两个属性的对象。在 `ParentComponent` 中，我们将 `count` 和 `setCount` 作为 `MyContext.Provider` 的值传递给它的后代组件。在 `ChildComponent` 中，我们使用 `MyContext.Consumer` 来获取 `count` 和 `setCount`，并且在 `button` 的 `onClick` 事件中调用 `setCount` 来改变 `count` 的值。这样，我们就可以在子组件中设置 Context 的值了。

需要注意的是，在这个例子中，我们使用了函数组件来实现 `ChildComponent`，但是同样的方法也可以用于类组件。另外，我们还使用了 TypeScript 来定义 Context 的类型和 `setCount` 函数的类型。