动态生成单选按钮状态问题：如何仅为选中项添加类名

你当前的问题出在用单个布尔值isChecked控制所有单选按钮的类名——只要这个值变化，所有按钮都会同步切换样式，自然达不到只给选中项加类的效果。正确的做法是记录选中选项的ID，而非统一的布尔状态。

修复步骤： #

• 将状态从布尔值改为存储选中的选项ID，初始值设为null（表示未选中）
• 点击单选按钮时，把当前选项的ID存入状态
• 每个单选按钮单独判断：自身ID是否等于状态中的选中ID，以此决定是否添加类名

修改后的代码： #

export default function RadioGroup({ options, name }) {
  // 存储选中的选项ID，初始未选中设为null
  const [selectedId, setSelectedId] = useState(null);

  return (
    <>
      {options.map(option => (
        <Radio
          key={option.id} // 必须添加key，避免React渲染警告
          radioID={option.id}
          radioName={name}
          radioLabel={option.label}
          // 仅当前选项ID匹配选中ID时，添加类名
          radioClass={selectedId === option.id ? " bg-blue" : ""}
          onChange={() => setSelectedId(option.id)}
        />
      ))}
    </>
  );
}

额外说明： #

1. 列表渲染一定要加key属性，这是React的要求，能提升渲染性能并避免警告
2. 如果需要默认选中某个选项，把useState的初始值改成对应选项的ID即可，比如useState(options[0]?.id)
3. 确保所有单选按钮的radioName属性一致，这样浏览器才会将它们识别为同一组，实现互斥选中的原生行为

内容的提问来源于stack exchange，提问作者ben-rinehart