React图片轮播如何为导航点添加点击功能及当前页激活标识？

核心问题说明 #

你当前的导航点失效是两个原因导致的：

• React中事件绑定需要用驼峰格式onClick，而非原生的onclick，且不能直接传入字符串形式的函数调用语句
• 硬编码的导航点没有和当前轮播状态做绑定，也没有点击跳转的逻辑

代码修改步骤 #

1. 替换导航点硬编码为动态渲染 #

找到你代码中dot-container对应的部分，替换为如下代码：

<div className="dot-container">
  {image.map((_, index) => (
    <span 
      key={index}
      className={`dot ${currentSlide === index ? 'active' : ''}`}
      onClick={() => setCurrentSlide(index)}
    />
  ))}
</div>

2. 补充导航点激活态样式 #

在你的sliderEle.css中加入如下样式，用于标识当前所在轮播页：

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  margin: 0 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.dot.active {
  background-color: #fff;
  transform: scale(1.3);
}

3. 可选优化：修复轮播项key警告 #

你原有代码中轮播项的key绑定了整个图片对象，会触发React的key警告，修改轮播项的渲染逻辑即可：

{image.map((imageItem, index) => (
  <div key={index}>
    <h1 className="title">{imageItem.title}</h1>
    <p className="para">{imageItem.para}</p>
    <IMG src={imageItem.src} />
  </div>
))}

修改完成后点击导航点就可以直接跳转到对应轮播页，且激活状态的导航点会有明显的样式区分。

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