React配合Tailwind开发时如何动态追加类实现点击计数元素的动画效果

最优解决方案：动态类名拼接 #

你可以直接通过动态拼接类名的方式实现需求，完全不需要改动原有元素结构，也不需要把基础样式抽离到state中，这也是Tailwind生态下处理条件类的标准实践，有两种实现方式可选：

方式1：模板字符串原生实现（无额外依赖） #

直接在className的模板字符串中写条件判断，适合动态类数量少的场景：

import { useState, useRef } from 'react';

const [count, setCount] = useState(0);
const [isBouncing, setIsBouncing] = useState(false);
const bounceTimer = useRef(null);

const handleClick = () => {
  setCount(prev => prev + 1);
  // 清除之前的定时器，避免连续点击导致动画异常
  if (bounceTimer.current) clearTimeout(bounceTimer.current);
  setIsBouncing(true);
  bounceTimer.current = setTimeout(() => setIsBouncing(false), 1000);
};

return <>
  {count > 0 && (
    <p 
      className={`text-2xl mb-2 font-bold text-black dark:text-white ${isBouncing ? 'animate-bounce' : ''}`}
    >
      {count}
    </p>
  )}
  <button 
    className="px-4 py-3 mb-2 rounded-lg font-semibold transition-colors duration-300 bg-cardinal-default hover:bg-cardinal-dark active:bg-cardinal-darkest text-black dark:text-white"
    onClick={handleClick}
  >
    Click me
  </button>
</>;

方式2：使用clsx工具类（适合多条件类场景） #

如果后续需要加更多条件类，推荐使用轻量类名拼接工具clsx，语法更清晰，避免模板字符串写太多判断逻辑混乱：

import { useState, useRef } from 'react';
import clsx from 'clsx';

const [count, setCount] = useState(0);
const [isBouncing, setIsBouncing] = useState(false);
const bounceTimer = useRef(null);

const handleClick = () => {
  setCount(prev => prev + 1);
  if (bounceTimer.current) clearTimeout(bounceTimer.current);
  setIsBouncing(true);
  bounceTimer.current = setTimeout(() => setIsBouncing(false), 1000);
};

return <>
  {count > 0 && (
    <p 
      className={clsx(
        'text-2xl mb-2 font-bold text-black dark:text-white',
        isBouncing && 'animate-bounce'
        // 后续新增条件类直接在这里加即可，比如count > 10 && 'text-red-500'
      )}
    >
      {count}
    </p>
  )}
  <button 
    className="px-4 py-3 mb-2 rounded-lg font-semibold transition-colors duration-300 bg-cardinal-default hover:bg-cardinal-dark active:bg-cardinal-darkest text-black dark:text-white"
    onClick={handleClick}
  >
    Click me
  </button>
</>;

方案优势 #

1. 基础样式直接和元素绑定，完全符合Tailwind的开发习惯，可读性和可维护性远高于第一种字符串拼接方案
2. 不需要额外嵌套span元素，也不需要加多余的inline-block属性，没有额外的DOM结构成本
3. 扩展成本极低，后续新增其他条件样式只需要加对应判断规则即可

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