面试题：React高阶组件中Context的基础使用

创建 Context：

import React from'react';

const ThemeContext = React.createContext();

export default ThemeContext;

父组件提供主题数据：

import React, { useState } from'react';
import ThemeContext from './ThemeContext';

const ParentComponent = () => {
    const [theme, setTheme] = useState('light');
    const toggleTheme = () => {
        setTheme(theme === 'light'? 'dark' : 'light');
    };

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {/* 子组件在此处渲染 */}
        </ThemeContext.Provider>
    );
};

export default ParentComponent;

创建高阶组件：

import React from'react';
import ThemeContext from './ThemeContext';

const withTheme = (WrappedComponent) => {
    return (props) => {
        const context = React.useContext(ThemeContext);
        return <WrappedComponent {...props} theme={context.theme} toggleTheme={context.toggleTheme} />;
    };
};

export default withTheme;

子组件使用高阶组件：

import React from'react';
import withTheme from './withTheme';

const ChildComponent = ({ theme, toggleTheme }) => {
    return (
        <div>
            <p>当前主题: {theme}</p>
            <button onClick={toggleTheme}>切换主题</button>
        </div>
    );
};

export default withTheme(ChildComponent);

核心逻辑：

首先通过 React.createContext 创建一个 ThemeContext，用于在组件树中传递主题相关数据。
父组件通过 ThemeContext.Provider 提供主题数据（theme 和 toggleTheme 方法），这些数据会被传递给所有后代组件。
高阶组件 withTheme 使用 React.useContext 获取 ThemeContext 中的数据，并将其作为属性传递给包裹的子组件。
子组件通过高阶组件包裹后，可以接收并使用这些主题相关的数据，实现主题切换的功能。

星途面试题库

面试题：React高阶组件中Context的基础使用

知识考点

面试题答案