如何更改所选 div 的颜色和其他颜色相同？

Question

我有一个动态数组的div表示编号列表，即

Array.from({length: data.length}).map((item,value)=>(
<div onClick={()=>sliderRef.current.slickGoTo(index)}></div>
))

我有两个类，dot是灰色的，active是红色的。如何改变div的颜色为红色，这是点击/选择和其余的是灰色?

Answer 1

您使用React，对吗?你可以写一个组件来代替你的div，它应该包含一个状态变量isClicked和一个函数handleClick。然后HandleClick可以将isClicked设置为true。然后你可以有条件样式，比如:

<div style={{backgroundColor: isClicked ? "red" : "gray"}} />