React组件Props传递点击事件遇阻，夜间模式切换按钮故障求助

一、核心问题修复步骤 #

类组件不能直接使用useState/useEffect钩子，得换成this.state和生命周期方法，同时要处理好方法作用域和事件绑定：

• 初始化主题状态
  在构造函数里初始化theme，顺便绑定toggleTheme的作用域，避免点击时this指向出错：

class App extends React.Component {
  constructor(props) {
    super(props);
    // 优先从本地存储读取主题，默认使用light
    this.state = {
      theme: localStorage.getItem('theme') || 'light'
    };
    // 绑定方法作用域
    this.toggleTheme = this.toggleTheme.bind(this);
  }

• 实现主题切换逻辑
  编写toggleTheme方法，切换theme的同时把状态存入localStorage，刷新页面也能记住设置：

toggleTheme() {
  this.setState(prevState => {
    const newTheme = prevState.theme === 'light' ? 'dark' : 'light';
    localStorage.setItem('theme', newTheme);
    return { theme: newTheme };
  });
}

• 同步主题到页面样式
  用componentDidMount初始化页面主题，componentDidUpdate监听主题变化实时更新样式：

componentDidMount() {
  document.documentElement.setAttribute('data-theme', this.state.theme);
}

componentDidUpdate(prevProps, prevState) {
  if (prevState.theme !== this.state.theme) {
    document.documentElement.setAttribute('data-theme', this.state.theme);
  }
}

• 绑定悬浮按钮点击事件
  直接把绑定好的toggleTheme传给按钮的onClick属性：

<FloatingActionButton onClick={this.toggleTheme}>
  {this.state.theme === 'light' ? <DarkModeIcon /> : <LightModeIcon />}
</FloatingActionButton>

二、Context的适用性分析 #

如果你的应用是多组件结构，多个地方需要访问主题状态或调用切换功能，使用Context确实更合适：

• 无需通过props层层传递主题和切换方法，减少代码冗余
• 全局统一管理主题状态，所有组件能实时响应主题变化
• 后续扩展主题色选择这类功能时，实现成本更低

要是仅单个组件使用主题切换，上面的类组件写法完全够用；但涉及跨组件共享主题，建议重构为Context + 类组件（或函数组件）的组合模式。

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