React useContext使用问题：如何避免Button组件的Props传递

解决这个问题的核心是正确使用Context的Provider包裹组件树，并通过useContext钩子在子组件中消费状态，具体步骤如下：

1. 创建Context对象 #

先单独创建一个Context文件（比如ThemeContext.js），或者在App组件所在文件中定义并导出Context：

// ThemeContext.js
import { createContext, useContext } from 'react';

// 创建Context，初始值设为null或符合结构的默认值
const ThemeContext = createContext(null);

// 封装自定义钩子，简化子组件调用（可选但推荐）
export const useTheme = () => useContext(ThemeContext);

export default ThemeContext;

2. 在App组件中用Provider包裹子组件 #

在App组件中定义isFakeDark状态和修改方法，通过ThemeContext.Provider的value属性把状态和方法传递下去，确保Button组件在Provider的包裹范围内：

// App.js
import { useState } from 'react';
import ThemeContext from './ThemeContext';
import Button from './Button';

function App() {
  const [isFakeDark, setIsFakeDark] = useState(false);

  // 把状态和修改方法打包成对象，方便传递
  const themeValue = {
    isFakeDark,
    toggleTheme: () => setIsFakeDark(prev => !prev)
  };

  return (
    // 用Provider包裹所有需要访问该状态的组件
    <ThemeContext.Provider value={themeValue}>
      <div className={`app ${isFakeDark ? 'dark' : ''}`}>
        <Button />
      </div>
    </ThemeContext.Provider>
  );
}

export default App;

3. 在Button组件中消费Context #

直接用封装的useTheme钩子（或原生useContext）获取状态和方法，无需任何props传递：

// Button.js
import { useTheme } from './ThemeContext';

function Button() {
  const { isFakeDark, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      当前主题：{isFakeDark ? '深色' : '浅色'}，点击切换
    </button>
  );
}

export default Button;

为什么之前导入失败？ #

isFakeDark是App组件内部的局部状态，作用域仅限于App组件内部，外部组件无法直接导入使用。必须通过Context的Provider把状态注入到组件树中，子组件才能通过useContext获取到。

额外提示 #

• 只要Button在Provider的包裹范围内，不管组件树层级多深，都能直接获取状态
• 可根据需求把Provider放在更高层级（比如main.jsx），让更多组件共享状态
• 自定义钩子useTheme能避免子组件重复调用useContext(ThemeContext)，让代码更简洁

内容的提问来源于stack exchange，提问作者13reath