React基于useState实现点击按钮切换h1标签颜色的方法

原代码核心问题 #

• 违反React渲染规则：组件渲染阶段（函数主体内）直接调用setColor更新状态，会触发「更新状态→重渲染→再次执行渲染期更新状态」的无限循环，直接导致页面崩溃，完全无法实现正常切换。
• 状态逻辑冗余混乱：共声明了3个状态，但textColor从未绑定到任何DOM元素，属于无效状态；selected的布尔判断逻辑没有绑定到交互回调，反而在渲染期硬改颜色值，从逻辑上就无法实现双向切换。
• 状态绑定错位：把按钮的背景色和h1的文字色共用同一个color状态，没有解耦两个元素的样式逻辑，进一步加剧了交互的混乱。
• 交互逻辑缺失：点击按钮的回调中仅翻转了selected值，没有将这个布尔值和h1的颜色渲染逻辑正确关联，甚至包含了无效的setTextColor('red')调用，对目标效果没有任何帮助。

修正后可直接运行的实现代码 #

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

function Deneme() {
  // 仅保留必要状态：记录h1是否切换为蓝色
  const [isH1Blue, setIsH1Blue] = useState(false);
  // 根据状态计算h1的颜色：默认黑色 ↔ 指定蓝色
  const h1StyleColor = isH1Blue ? '#165DFF' : 'black';
  // 按钮背景色独立维护，和h1样式解耦
  const buttonBg = 'red';

  return (
    <div className="App">
      <button
        style={{ background: buttonBg }}
        className='btn btn-primary'
        onClick={() => {
          // 点击时翻转状态，自动实现双向切换
          setIsH1Blue(prev => !prev)
        }}
      >
        Click here
      </button>
      <h1 style={{ color: h1StyleColor }}>Change Color</h1>
    </div>
  );
}

export default Deneme;

实现逻辑说明 #

• 移除所有无意义的冗余状态，仅用1个布尔状态记录h1的当前样式状态，减少不必要的重渲染开销。
• 所有状态更新操作都放在点击事件的回调中执行，严格遵循React Hooks的运行规则，从根源上避免无限重渲染问题。
• 将按钮背景、h1文字色的样式逻辑完全解耦，不会因为共用状态导致样式互相干扰。
• 颜色值根据状态直接计算，不需要单独在状态中存储颜色字符串，后续如果要调整默认色、蓝色色值，只需要修改对应计算逻辑即可。

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