在 React 中为 useContext 使用条件的最佳方法？答案

【问题标题】：Best way to use conditional for useContext in React?在 React 中为 useContext 使用条件的最佳方法？
【发布时间】：2020-09-29 01:52:54
【问题描述】：

我有一个 CommonChild 组件，它调用了两个组件：Parent1 和 Parent2。

粗体Parent1 和Parent2 使用不同的AppContext。

请看下面的一些简单代码：

import React, { useState, useContext, createContext } from 'react'

//Create two createContext of Parents
const ContextParent1 = createContext();
const ContextParent2 = createContext();

//Create two providers of Parents
const AppProviderParent1 = (props) => {
    const [state] = useState("This is AppProviderParent1")
    return (
        <ContextParent1.Provider value={state}>
            {props.children}
        </ContextParent1.Provider>
    )
}
const AppProviderParent2 = (props) => {
    const [state] = useState("This is AppProviderParent2")
    return (
        <ContextParent2.Provider value={state}>
            {props.children}
        </ContextParent2.Provider>
    )
}

//Two parents called CommonChild, but different AppProvider (created above)
const Parent1 = (props) => {
    return (
        <AppProviderParent1 {...props}>
            <CommonChild />
        </AppProviderParent1>
    )
}
const Parent2 = (props) => {
    return (
        <AppProviderParent2 {...props}>
            <CommonChild />
        </AppProviderParent2>
    )
}

//CommonChild that try to use useContext to get value
const CommonChild = () => {
    const context = useContext(...) //how to use useContext?
    return (
        <p>This is CommonChild Component</p>
    )
}

我不知道如何在CommonChild 中合理地使用useContext。

感谢您的帮助

【问题讨论】：

您创建一个单独的上下文const MyContext = createContext(<Default value here>);，然后在更改您提供的value 属性的每个父母中为该上下文创建提供程序。然后通过调用const context = useContext(MyContext) 使用子上下文中的上下文，如果没有找到父上下文，它将接收最相关的父上下文或默认值。
哦。你的意思是，AppProviderParent1 和 AppProviderParent2 都可以使用相同的createContext？
是的，如果他们持有的属性没有区别的话。即父 1 可以提供值 { propA: true}，父 2 可以提供值 { propA: false}
我会试试的。谢谢
这里是一个例子https://stackblitz.com/edit/react-ts-jheevm?file=index.tsx。注意：使用打字稿

标签： reactjs react-hooks use-context

【解决方案1】：

方法一

您可以将标识符传递给CommonChild，以告知谁在调用它。然后像这样使用条件操作?-

const Parent1 = (props) => {
    return (
        <AppProviderParent1 {...props}>
             
            {/********** Pass down the caller string **********/}
            <CommonChild caller='parent1' />
        </AppProviderParent1>
    )
}
const Parent2 = (props) => {
    return (
        <AppProviderParent2 {...props}>
            
        {/********** Pass down the caller string **********/}
            <CommonChild caller='parent2' />
        </AppProviderParent2>
    )
}

//CommonChild that try to use useContext to get value
const CommonChild = ({caller}) => {
    const context = 
        caller === useContext('parent1' ?  AppProviderParent1 : AppProviderParent2);
    return (
        <p>This is CommonChild Component</p>
    )
}

方法二

正如您在评论中所说，您也有多个上下文和子项。为此，您可以将所有上下文放在一个数组中，并将一个数字传递给子组件，指示要使用的上下文的 index。

const appProviders = [AppProviderParent1, AppProviderParent2];

const Parent1 = (props) => {
    return (
        <AppProviderParent1 {...props}>
             
            {/********** Pass down index of AppProvider **********/}
            <CommonChild providerIndex='1' />
        </AppProviderParent1>
    )
}
const Parent2 = (props) => {
    return (
        <AppProviderParent2 {...props}>
            
        {/********** Pass down index of AppProvider **********/}
            <CommonChild providerIndex='2' />
        </AppProviderParent2>
    )
}


const CommonChild = ({providerIndex}) => {

// Remember to subtract 1 from providerIndex
    const context = 
        caller === useContext(AppProviders[providerIndex - 1];
    return (
        <p>This is CommonChild Component</p>
    )
}

这样，您可以将相关的上下文传递给您想要的任何孩子。

【讨论】：

我不喜欢这样，因为我在两个父组件中都有很多子使用