React/Tailwind实现点击按钮高亮：解决组件重渲染样式失效问题

核心思路：用React状态管理选中状态，配合条件类名修改样式 #

React是数据驱动视图的，不用像原生JS那样手动遍历DOM改样式。我们只需要用状态记住当前选中的按钮，再给每个按钮根据「是否被选中」拼接对应的Tailwind类就行，这是最贴合React生态的最佳实践。

直接上代码示例 #

比如我们要做一组按钮，用索引作为每个按钮的唯一标识：

import { useState } from 'react';

function ButtonGroup() {
  // 用状态存储当前选中的按钮索引，初始设为null表示未选中任何按钮
  const [selectedIndex, setSelectedIndex] = useState(null);

  // 点击按钮时，将当前按钮的索引存入状态
  const handleButtonClick = (index) => {
    setSelectedIndex(index);
  };

  // 按钮文字内容，可根据需求自定义
  const buttons = ['按钮1', '按钮2', '按钮3'];

  return (
    <div className="flex gap-2">
      {buttons.map((text, index) => (
        <button
          key={index}
          {/* 核心逻辑：判断当前按钮是否为选中状态，动态拼接Tailwind类 */}
          className={`px-4 py-2 rounded border transition-colors ${
            selectedIndex === index 
              ? 'bg-black text-white border-black' 
              : 'bg-white text-black border-gray-300 hover:bg-gray-100'
          }`}
          onClick={() => handleButtonClick(index)}
        >
          {text}
        </button>
      ))}
    </div>
  );
}

export default ButtonGroup;

关于Tailwind动态类名的说明 #

Tailwind完全支持这种条件判断拼接类名的方式，只要你使用的是Tailwind预定义好的类（比如bg-black、text-white这类），就不会有问题。

需要避免的是完全动态生成的类名（比如bg-${randomColor}），因为Tailwind的JIT编译器无法提前识别这类类名，会导致样式不生效。但像示例中用「是否选中」来切换预定义类的操作，是官方推荐的用法。

为什么focus/active类不好用？ #

focus:和active:是依赖浏览器的焦点、激活状态生效的，组件重渲染时，浏览器的焦点状态可能丢失，而且没法实现「点击A按钮保持选中，直到点击B按钮才切换」的持久选中效果。用React状态管理的话，完全由数据控制选中状态，状态不变样式就不会变，稳定性更高。

内容的提问来源于stack exchange，提问作者O'con