曹耘豪的博客

React之useContext

一般Context会定义在顶层，子类可获取其值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 定义一个Context
export const EnvContext = createContext('local');

export default function EnvComponent({children}: { children: ReactNode }) {
    const [env, setEnv] = useState('dev')
    
    return <>
        <EnvContext.Provider value={env}>
                {
                    children
                }
        </EnvContext.Provider>
    </>
}

在内部节点使用，获取最近的EnvContext.Provider的值，当最近的EnvContext.Provider更新时，子节点将重新渲染

1
2
3
4
5
6
7
8
9
export default function Children() {
    const env = useContext(EnvContext)
    
    return <>
        {
            env
        }
    </>
}

结构如下即可，或者更深，反正要在EnvComponent里面

1
2
3
<EnvComponent>
    <Children/>
</EnvComponent>
  技术 / 前端