如何根据布尔状态值为React按钮有条件添加Tailwind环形样式

你的代码中className的写法存在语法错误，三元运算符的结果没有和固定类名正确合并。以下是针对你需求的修复方案：

方案1：字符串模板合并类名 #

如果需求是**addButtonRing为true时显示黑色环形，为false时显示白色环形**，直接用模板字符串拼接动态类与固定类：

const [addButtonRing, setAddButtonRing] = useState(false);

<button
  className={`${addButtonRing ? 'ring-black ring-2' : 'ring-white ring-2'} rounded-xl shadow-md`}
>
  Button Text
</button>

注：ring-2是Tailwind的环形宽度类，默认无环形宽度时，仅加ring-black无法看到环形效果，需搭配对应宽度类（如ring-1、ring-3等）。

如果需求是仅当addButtonRing为true时显示环形，false时无环形，调整三元表达式结果：

<button
  className={`${addButtonRing ? 'ring-black ring-2' : ''} rounded-xl shadow-md`}
>
  Button Text
</button>

方案2：数组拼接类名 #

适合类名较多的场景，通过数组存储类名后转为字符串：

<button
  className={[
    addButtonRing ? 'ring-black ring-2' : 'ring-white ring-2',
    'rounded-xl',
    'shadow-md'
  ].join(' ')}
>
  Button Text
</button>

方案3：使用clsx库（推荐） #

clsx是处理条件类名的工具，让代码更简洁易读：

1. 先安装依赖：

npm install clsx
# 或
yarn add clsx

2. 代码示例：

import clsx from 'clsx';

// 切换环形颜色
<button
  className={clsx(
    addButtonRing ? 'ring-black ring-2' : 'ring-white ring-2',
    'rounded-xl',
    'shadow-md'
  )}
>
  Button Text
</button>

// 仅true时显示环形
<button
  className={clsx(
    addButtonRing && 'ring-black ring-2',
    'rounded-xl',
    'shadow-md'
  )}
>
  Button Text
</button>

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