React颜色选择组件中，如何为选中元素添加CSS的selected类？

要给选中的颜色圆形添加selected类，按以下两步操作即可：

1. 给Color组件传入当前选中状态
   在App组件的Color标签中，额外传入selectedColor属性：

<Color color="violet" setSelectedColor={setSelectedColor} selectedColor={selectedColor}/>
<Color color="orange" setSelectedColor={setSelectedColor} selectedColor={selectedColor}/>
<Color color="yellow" setSelectedColor={setSelectedColor} selectedColor={selectedColor}/>

2. 在Color组件中用三元运算符判断并拼接类名
   修改Color组件的className属性，判断当前颜色是否为选中状态，若是则同时应用color和selected类：

const Color = ({ color, setSelectedColor, selectedColor }) => {
  return (
    <div 
      className={color === selectedColor ? `${color} selected` : color} 
      onClick={() => setSelectedColor(color)}
    ></div>
  );
};

这样点击颜色时，对应圆形会自动加上selected类，切换选中项时旧选中项的selected类也会自动移除。

如果需要处理多条件类的场景，也可以用数组拼接的方式（效果一致）：

className={[color, color === selectedColor ? 'selected' : null].filter(Boolean).join(' ')}

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