javascript - 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>
  );
};

需要将一个上下文定义的所有父上下文的数据提供给一组孩子

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

标签： javascriptreactjsreact-context

Answer 1

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

但是，您可以使用单个提供程序来代替返回该getData函数。这是一个使用单个DataProvider和自定义 React 钩子来提供“id”值的示例。

Data.Context.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;

index.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>
  )
}