如何实现点击选中div变红其余为灰色？React动态渲染Slick滑块dot样式切换问题

核心思路 #

通过React状态存储当前激活项的索引，渲染时根据索引匹配结果动态绑定类名即可。

具体步骤 #

• 第一步：声明状态存储激活项索引，初始值可根据需求设置（设0则默认选中第一项，设-1则默认无选中项）

import { useState } from 'react'

// 组件内声明状态
const [activeIndex, setActiveIndex] = useState(0)

• 第二步：修改列表渲染逻辑，点击时更新激活索引，同时动态绑定类名

Array.from({length: data.length}).map((item, index) => (
  <div 
    className={`dot ${index === activeIndex ? 'active' : ''}`}
    onClick={() => {
      setActiveIndex(index)
      sliderRef.current.slickGoTo(index)
    }}
    key={index}
  ></div>
))

注意需要给循环渲染的元素加唯一key属性，避免React告警，这里如果data里有唯一id优先用id做key，没有可以暂时用index代替。

样式说明 #

你预先定义的.dot灰色样式和.active红色样式不需要修改，只要保证.active样式优先级高于.dot，能覆盖颜色设置即可，参考示例：

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc; /* 灰色 */
  cursor: pointer;
}
.active {
  background: #f00; /* 红色 */
}

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