React：如何使用相同类型的多个上下文，同时允许子级从所有上下文中读取数据

Question

我有一个与此类似的上下文设置

const DataContext = createContext({ data: null });

const getData = (key) => {
    switch(key) {
        case 1:
            return "Hello"
        case 2:
            return " World"
        default:
            return null
    }
}

export const DataProvider = ({ id, children }) => {

  const data = useMemo(() => {
    return getData(id);
  }, [id]);

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

export default DataContext

以及像这样使用它的子组件

const HelloComponent = () => {
    return <DataProvider id={1}>
        {
            // children are components that useContext(DataContext) and expect data to be "Hello"
        }
    </DataProvider>
}

现在我需要这样做

const HelloWorldComponent = () => {
  return (
    <DataProvider id={1}>
      <DataProvider id={2}>
        {
          // children are components that need to read both Hello and World
        }
      </DataProvider>
    </DataProvider>
  );
};

需要向一组子级提供单个 Context 定义的所有父级上下文数据

我知道 useContext 只能读取给定 ContextType 最接近的父级，所以我不确定如何继续执行此操作。

Answer 1

您不能使用两个相同类型的上下文提供程序并让子级从这两个提供程序接收内容。Context API 使得子组件从 React 树中距离它们最近的上下文提供者接收上下文值。

但是，您可以使用单个提供程序来返回该getData函数。下面是一个使用单个DataProvider自定义 React hook 来提供“id”值的示例。

数据上下文.js

import { createContext, useContext } from "react";

const DataContext = createContext({
  getData: () => {}
});

const getData = (key) => {
  switch (key) {
    case 1:
      return "Hello";
    case 2:
      return " World";
    default:
      return null;
  }
};

export const useDataContext = (id) => useContext(DataContext).getData(id);

const DataProvider = ({ children }) => {
  return (
    <DataContext.Provider value={{ getData }}>{children}</DataContext.Provider>
  );
};

export default DataProvider;

索引.js

<DataProvider>
  <App />
</DataProvider>

子组件

import { useDataContext } from "./Data.Context";

const Child = () => {
  const data1 = useDataContext(1);
  const data2 = useDataContext(2);

  return (
    <div>
      <div>DataProvider 1: {data1}</div>
      <div>DataProvider 2: {data2}</div>
    </div>
  )
}