React中点击答案后如何通过三元运算符动态切换按钮className

需求梳理 #

• 技术栈：React/TypeScript + Bootstrap
• 交互规则：
  • 用户点击答案按钮前，所有选项按钮默认使用btn-light样式
  • 用户点击选择答案后，当前选中的正确选项切换为btn-success样式，错误选项切换为btn-danger样式

原有代码问题 #

之前的写法存在两个核心问题：

1. 类名拼接逻辑错误：将逻辑运算符&&直接写入类名字符串，会被当成普通类名解析，无法触发条件判断
2. 缺少「用户是否已作答」的状态判断：没有区分「未点击」和「已选答案」两个阶段，要么默认样式锁死不切换，要么组件首次渲染就直接按答案正误显示样式，不符合点击后才切换的要求

正确实现代码 #

首先需要单独维护用户选中答案的状态，初始值设为null代表未作答状态，再基于状态分支拼接类名：

import { useState } from 'react';

// 题目组件内可提前定义题目相关变量
// const correct = "当前题正确答案值";
// const ansList = ["选项1", "选项2", "选项3", "选项4"];

export default function QuizQuestion() {
  // 存储用户选中的答案，null代表未选择状态
  const [selectedAns, setSelectedAns] = useState<string | null>(null);

  return (
    <div className="question-wrap p-3">
      {/* 题目内容区域省略 */}
      <div className="answer-group mt-3">
        {ansList.map((ans) => (
          <button
            key={ans}
            className={`answers btn w-100 mb-2 text-start ${
              // 未选答案时默认light样式
              selectedAns === null
                ? 'btn-light'
                // 选完后判断正误切换对应样式
                : ans === correct
                  ? 'btn-success'
                  : 'btn-danger'
            }`}
            onClick={() => {
              // 可选逻辑：选完后禁止修改答案，避免重复点击更新状态
              if (selectedAns === null) {
                setSelectedAns(ans);
              }
            }}
            // 选完后禁用按钮点击，和上面逻辑配套
            disabled={selectedAns !== null}
          >
            {ans}
          </button>
        ))}
      </div>
    </div>
  )
}

注意事项 #

• Bootstrap 按钮样式需要配合基础类btn使用，btn-light/btn-success/btn-danger本身已内置背景色样式，不需要额外叠加bg-*类，避免样式优先级冲突
• 动态类名判断要按状态分支写全，不要把逻辑运算符硬拼到类名字符串里
• 切换到下一题时，记得把selectedAns重置为null，恢复按钮默认样式

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