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

问题描述

我有一个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>
    )
}

我不知道如何明智地在useContext中使用CommonChild。

感谢您的帮助

解决方法

方法1

您可以将标识符传递给Map<String,Integer> variables = new HashMap<>(); String[] variableNames = { "Small Coffee","Medium Coffee","Large Coffee","Banana Berry Smoothie","Mocha Shake","Raspberry Green Tea" }; System.out.println("Please enter the number of each drink that you like to purchase:"); for (String drinkName : variableNames) { // ask for the amount of drink System.out.print(drinkName + ": "); int amount = scnr.nextInt(); // error check if (amount < 0) { System.out.println("Invalid amount"); System.exit(1); } // add to map variables.put(drinkName,amount); } ，以告诉谁在呼叫它。然后像这样使用条件操作CommonChild-

?

方法2

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

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

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