在React应用程序中实现两个提供程序

const Provider1Context = React.createContext();
const Provider2Context = React.createContext();

function Provider1({ children }) {
  // 在这里可以定义Provider1提供的数据
  const data = "Provider1 data";

  return (
    <Provider1Context.Provider value={data}>
      {children}
    </Provider1Context.Provider>
  );
}

function Provider2({ children }) {
  // 在这里可以定义Provider2提供的数据
  const data = "Provider2 data";

  return (
    <Provider2Context.Provider value={data}>
      {children}
    </Provider2Context.Provider>
  );
}

function App() {
  return (
    <Provider1>
      <Provider2>
        <ChildComponent />
      </Provider2>
    </Provider1>
  );
}

function ChildComponent() {
  const data1 = useContext(Provider1Context);
  const data2 = useContext(Provider2Context);

  // 使用Provider1和Provider2提供的数据进行操作

  return (
    <div>
      <p>Provider1 data: {data1}</p>
      <p>Provider2 data: {data2}</p>
    </div>
  );
}