如何正确地使用React上下文（附代码）

我们的目标是消除context ，因此不需要确保我们的组件，并提供一个简单的方式来访问信息和修改。

在这个例子中，我们要在我们的网站context 上创建一个显示器。为此，我们建立了一个档案：counter.context.jsx：

export const CounterContext = createContext();

export const CounterProvider = ({children}) => {
    const [counter, setCounter] = useState(0);

    return <CounterContext.Provider value={{counter, setCounter}}>
        {children}
    </CounterContext.Provider>
}

当我们创建了我们的背景后，在这个同样的档案中，我们要创建一个useCounterContext ，以便能够修改和访问我们背景的信息：

export const useCounterContext = () => {
    const context = useContext(CounterContext);

    if (context === undefined) {
        throw new Error('useCounterContext has to be used within a CounterProvider')
    }

    return context;
}

如果我们观察到，我们正在努力使我们的context ，而不是undefined 。当我们打算在我们的useCounterContext 以外的某个组件上使用我们的CounterProvider ，就会出现这种情况。我们将观察如何使我们的useCounterContext 能够被我们的组件访问，并将这些组件封装在我们的<CounterProvider />：

function App() {
    return (
        <div className="App">
            <h1>How to use React context</h1>
            <div className="card">
                <CounterProvider>
                    <FirstComponent/>
                    <SecondComponent/>
                </CounterProvider>
            </div>
        </div>
    )
}

export default App

我们的counter.context.jsx quedaría asi:

export const CounterContext = createContext();

export const CounterProvider = ({children}) => {
    const [counter, setCounter] = useState(0);

    return <CounterContext.Provider value={{counter, setCounter}}>
        {children}
    </CounterContext.Provider>
}

export const useCounterContext = () => {
    const context = useContext(CounterContext);

    if (context === undefined) {
        throw new Error('useCounterContext has to be used within a CounterProvider')
    }

    return context;
}

一旦有了回应，我们就可以从我们的组件FirstComponent 和SecondComponent 中访问这些数据。

在我们的FirstComponent ，我们将修改counter ，通过setCounter ，我们可以方便地使用我们之前创建的useCounterContext 。

function FirstComponent() {
    const {counter, setCounter} = useCounterContext()

    const handleClick = () => {
        setCounter(counter + 1);
    }

    return <>
        <h2>First Component</h2>
        <button onClick={handleClick}>Raise counter amount by context</button>
    </>
}

export default FirstComponent;

在SecondComponent ，我们将通过我们的useCounterContext ，显示出counter 的价值。

function SecondComponent() {
    const {counter} = useCounterContext()
    return <>
        <h2>Second Component</h2>
        <p>
            Display context counter value: {counter}
        </p>
    </>
}

export default SecondComponent;