react v18 如何在不同的component 之间共享数据

在 React v18 中，可以使用 React Context 来在不同的组件之间共享数据。

首先，需要创建一个 Context 对象来存储要共享的数据。可以使用 React.createContext() 方法来创建一个新的 Context 对象。例如：

const MyContext = React.createContext();

然后，需要在一个父组件中将要共享的数据传递给 Context 对象。可以使用 MyContext.Provider 组件来包裹需要共享数据的子组件，并通过 value 属性将数据传递给子组件。例如：

function ParentComponent() {
  const sharedData = "Shared Data";
  
  return (
    <MyContext.Provider value={sharedData}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

接下来，在需要访问共享数据的子组件中，可以使用 MyContext.Consumer 组件来消费共享数据。使用函数作为 MyContext.Consumer 的子组件，并接收共享数据作为参数。例如：

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {sharedData => (
        <div>{sharedData}</div>
      )}
    </MyContext.Consumer>
  );
}

这样，ChildComponent 就可以访问到 ParentComponent 中共享的数据了。

另外，还可以使用 useContext 钩子来访问共享数据。可以在函数组件中使用 useContext 钩子来获取 Context 对象中的共享数据。例如：

function ChildComponent() {
  const sharedData = React.useContext(MyContext);
  
  return (
    <div>{sharedData}</div>
  );
}

这样，ChildComponent 就可以通过 useContext 钩子来获取 ParentComponent 中共享的数据了。

通过上述方法，就可以在不同的组件之间共享数据了