在 React 中使用 Context API 实现跨组件通信的方法-牛翰网

1. 创建 Context

首先，你需要使用 React.createContext 方法创建一个新的 Context 对象。

import React from 'react';
const MyContext = React.createContext();

2. 提供 Context 值

使用 Context.Provider 组件来包裹你的组件树，以便在树中的任何位置都能访问到 Context 的值。在 Provider 中，你可以传递一个值对象，这个对象可以包含多个属性，这些属性可以在整个应用中共享。

function App() {
    const [theme, setTheme] = useState('light');
    const toggleTheme = () => {
        setTheme((prevTheme) => prevTheme === 'light' ? 'dark' : 'light');
    };
    return (
        <MyContext.Provider value={{ theme, toggleTheme }}>
            <Navbar />
            <Content />
        </MyContext.Provider>
    );
}

3. 消费 Context 值

在子组件中，你可以使用 Context.Consumer 或 useContext Hook 来访问 Context 的值。

使用 Context.Consumer：

function Navbar() {
    return (
        <MyContext.Consumer>
            {(value) => (
                <nav>
                    <button onClick={value.toggleTheme}>
                        Toggle Theme: {value.theme}
                    </button>
                </nav>
            )}
        </MyContext.Consumer>
    );
}

使用 useContext Hook（更简单，推荐使用）：

import React, { useContext } from 'react';
function Content() {
    const { theme, toggleTheme } = useContext(MyContext);
    return (
        <div>
            <p>The current theme is: {theme}</p>
            <button onClick={toggleTheme}>Toggle Theme</button>
        </div>
    );
}