javascript - React - 使用多个 createContexts 的最佳方式是什么？

Question

我刚刚了解了 createContext Hook ，我想知道在整个项目中全局使用多个上下文的最佳方法是什么。

根据我的观察，如果您想创建和使用多个上下文，那么使用多个嵌套的 Context 标记会显得有些困惑，我想知道是否有更简洁的方法来执行此操作？

(我认为使用四个上下文的项目的示例)

import React, { createContext, useState } from "react";

export const OneContext = createContext();
export const TwoContext = createContext();
export const ThreeContext = createContext();
export const FourContext = createContext();

export default function App(){
    const [one, setOne] = useState(null);
    const [two, setTwo] = useState(null);
    const [three, setThree] = useState(null);
    const [four, setFour] = useState(null);

   return(
        <>
            <OneContext.Provider value={one}>
                <TwoContext.Provider value={two}>
                    <ThreeContext.Provider value={three}>
                        <FourContext.Provider value={four}>            
                            "Insert components here"
                        <FourContext.Provider />
                    <ThreeContext.Provider />
                <TwoContext.Provider />
            <OneContext.Provider />
        </>
   )
}

Answer 1

你可以这样做

<AppContext.Provider
  value={{
    oneCTX: [one, setOne],
    twoCTX: [two, setTwo],
    threeCTX: [three,setThree]
  }}
>
  {props.children}
</AppContext.Provider>

在其他文件上，你可以这样调用它们，首先从 context.js 文件中导入 AppContext，然后执行此操作

const { oneCTX } = useContext(AppContext);
const [one, setOne] = loggedUserCTX;