如何为React轮播组件动态添加slide-current类至激活幻灯片？

嘿，我一眼就瞅出问题所在了——你的checkClass函数逻辑完全跑偏了，这就是为啥只有首次渲染能生效，切换按钮点了之后类名没动静的原因！

问题根源 #

原来的checkClass(i)里，你拿循环currentSlides的下标k和幻灯片元素的索引i做对比，比如当currentSlides变成[3,4,5]时，k只会是0、1、2，永远不可能等于3、4、5，那类名肯定加不上啊。正确的逻辑应该是判断当前元素的索引i是否存在于currentSlides数组中，而不是和循环下标瞎比。

修正方案 #

我给你一步步捋明白怎么改：

1. 彻底修复checkClass函数
   直接用数组的includes方法判断，代码简洁又精准：

   checkClass(i) {
     // 只要当前元素索引在目标数组里，就返回类名，否则返回空字符串
     return this.state.currentSlides.includes(i) ? ' slide-current ' : '';
   }
   

2. 补上onPreviousClick函数+添加边界防护
   你原来的代码里没写这个函数，而且切换时完全没做边界判断，很容易出现索引越界的问题（比如往前切到负数，往后切超过总幻灯片数量）：

   onNextClick() {
     const totalSlides = this.props.order.orders.length;
     const lastCurrentIndex = this.state.currentSlides[this.state.currentSlides.length - 1];
     // 如果最后一个当前元素已经是最后一张幻灯片，就停止往后切
     if (lastCurrentIndex >= totalSlides - 1) return;
     // 用函数式setState，因为新状态依赖旧状态，这样更可靠
     this.setState(prevState => ({
       currentSlides: prevState.currentSlides.map(item => item + 3)
     }));
   }
   
   onPreviousClick() {
     const firstCurrentIndex = this.state.currentSlides[0];
     // 如果第一个当前元素已经是第一张幻灯片，就停止往前切
     if (firstCurrentIndex <= 0) return;
     this.setState(prevState => ({
       currentSlides: prevState.currentSlides.map(item => item - 3)
     }));
   }
   

3. 确保初始状态正确
   记得在组件里初始化currentSlides为初始的三个索引，比如用类属性初始化：

   state = {
     currentSlides: [0, 1, 2]
   };
   

完整修正后的组件代码 #

class SlideComponent extends React.Component {
  state = {
    currentSlides: [0, 1, 2]
  };

  checkClass(i) {
    return this.state.currentSlides.includes(i) ? ' slide-current ' : '';
  }

  createSlides() {
    return this.props.order.orders.map((item, i) => (
      <div key={i} className={this.checkClass(i)}>
        {/* 这里帮你加上了渲染订单内容的逻辑，不用只显示element啦 */}
        {item.map((food, idx) => <span key={idx}>{food.title}</span>)}
      </div>
    ));
  }

  onNextClick() {
    const totalSlides = this.props.order.orders.length;
    const lastCurrentIndex = this.state.currentSlides[this.state.currentSlides.length - 1];
    if (lastCurrentIndex >= totalSlides - 1) return;
    this.setState(prevState => ({
      currentSlides: prevState.currentSlides.map(item => item + 3)
    }));
  }

  onPreviousClick() {
    const firstCurrentIndex = this.state.currentSlides[0];
    if (firstCurrentIndex <= 0) return;
    this.setState(prevState => ({
      currentSlides: prevState.currentSlides.map(item => item - 3)
    }));
  }

  render() {
    return (
      <div>
        {this.createSlides()}
        <button onClick={() => this.onNextClick()}>Next</button>
        <button onClick={() => this.onPreviousClick()}>Previous</button>
      </div>
    );
  }
}

额外小提示 #

• 我在createSlides里帮你加了渲染订单内容的逻辑，不用再显示干巴巴的element了，能正确展示每个订单里的食物标题。
• 如果总幻灯片数量不是3的倍数（比如你示例里的8张），最后一组会自动取剩下的元素（比如[5,6,7]），includes方法依然能正确判断，完全不用担心。

内容的提问来源于stack exchange，提问作者gold-dragon