如果使用 React 选择元素，如何将 CSS 类添加到元素？

Question

下面我有一系列 React 代码，其中页面上显示了多个圆圈，每个圆圈都有不同的颜色。单击某种颜色时，

nav

通过读取所选颜色来显示变化。

import { useState } from "react";
const Color = ({ color, setSelectedColor}) => {
  return <div className={color} onClick={() => setSelectedColor(color)}></div>;
};


const App = () => {
  const [selectedColor, setSelectedColor] = useState("");
  return (
    <div id="container">
      <div id="navbar">
        <div>Currently selected: </div>
        <div className={selectedColor}>{selectedColor}</div>
      </div>
      <div id="colors-list">
        <Color color="violet" setSelectedColor={setSelectedColor}/>
        <Color color="orange" setSelectedColor={setSelectedColor}/>
        <Color color="yellow" setSelectedColor={setSelectedColor}/>
      </div>
    </div>
  );
};

export default App;

我认为你们都不需要任何其他代码，但如果您确实需要它，请告诉我！

CSS 中有一个

class

，我称之为

selected

，它只是在圆圈周围创建边框。我遇到的问题是如何将

class

应用于

selectedColor

？我正在考虑三元运算符，但我对 React 有点陌生，所以我不确定应该如何实现它。

非常感谢任何帮助！

Answer 1

您需要添加一个变量来检查

color

属性是否与

selectedColor

匹配，如果匹配，则添加

selected

类，并且使用三元运算符，您可以同时应用

color

和

selected

课程。

import { useState } from "react";
const Color = ({ color, setSelectedColor, selectedColor }) => {
  const isSelected = color === selectedColor ? "selected" : "";
  return (
    <div
      className={`${color} ${isSelected}`} // Apply both color and selected classes
      onClick={() => setSelectedColor(color)}
    ></div>
  );
};

const App = () => {
  const [selectedColor, setSelectedColor] = useState("");

  return (
    <div id="container">
      <div id="navbar">
        <div>Currently selected: </div>
        <div className={selectedColor}>{selectedColor}</div>
      </div>
      <div id="colors-list">
        <Color color="violet" selectedColor={selectedColor} setSelectedColor={setSelectedColor} />
        <Color color="orange" selectedColor={selectedColor} setSelectedColor={setSelectedColor} />
        <Color color="yellow" selectedColor={selectedColor} setSelectedColor={setSelectedColor} />
      </div>
    </div>
  );
};

export default App;