在React中如何使用Context提供跨层级直接通信

在React中使用Context可以在组件树中提供跨层级的直接通信。首先需要创建一个Context对象，然后使用Provider组件包裹需要访问这个Context的子组件。子组件可以通过使用Consumer组件或者 useContext hook 来访问Context中的值。

下面是一个简单的例子：

// 创建一个Context对象
const MyContext = React.createContext();

// 父组件
function ParentComponent() {
  return (
    <MyContext.Provider value="Hello from Context">
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件
function ChildComponent() {
  return (
    <MyContext.Consumer>
      {value => <p>{value}</p>}
    </MyContext.Consumer>
  );
}

// 或者使用 useContext hook
function ChildComponent() {
  const value = useContext(MyContext);
  return <p>{value}</p>;
}

在上面的例子中，父组件提供了一个Context对象，并且将值传递给子组件。子组件可以通过使用Consumer组件或者 useContext hook 来访问Context中的值。

这样就可以实现在跨层级中直接通信。