React项目中如何维护多个react-slick组件的独立索引？

这个场景我太熟悉了！多个react-slick实例共享同一个状态的话，确实会出现索引串在一起的问题，根本分不清是哪个滑块切换了。咱们可以把每个滑块的索引和对应的用户绑定起来存储，完美解决这个问题，具体做法如下：

1. 调整状态存储结构 #

把原来单个的currentSlide状态，改成一个对象currentSlides，用用户的唯一标识（比如用户ID或者循环索引）作为key，对应的滑块索引作为value，这样每个用户的滑块索引都能独立存储：

constructor(props) {
  super(props);
  this.state = {
    currentSlides: {} // 结构示例：{ "user1": 0, "user2": 1 }
  };
}

2. 给每个Slider生成独立的配置 #

不再使用全局的settings对象，而是写一个函数，根据传入的用户标识生成专属的配置，让每个Slider的afterChange回调都能知道自己对应的是哪个用户：

getSliderSettings = (userKey) => {
  return {
    arrows: true,
    infinite: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    afterChange: (currentSlide) => {
      // 更新对应用户的滑块索引，不影响其他用户的状态
      this.setState(prevState => ({
        currentSlides: {
          ...prevState.currentSlides,
          [userKey]: currentSlide
        }
      }));
      console.log(`用户[${userKey}]的当前滑块索引：`, currentSlide);
    }
  };
};

3. 渲染时绑定用户标识 #

遍历用户数组时，给每个Slider传入对应的用户标识（优先用用户ID，没有的话用循环索引也可以），同时可以随时获取该用户当前的滑块索引：

render() {
  return (
    <div className="main-wrapper">
      {this.state.users.map((item, userIndex) => {
        // 用用户唯一ID作为标识，没有ID就用循环索引userIndex
        const userKey = item.id || userIndex;
        // 获取当前用户的滑块索引，默认初始值为0
        const currentSlide = this.state.currentSlides[userKey] || 0;
        
        return (
          <div className="main-wrapper-mobile" key={userKey}>
            <div className="carousel responsive1">
              <div className="mask">
                <div className="slideset">
                  <Slider {...this.getSliderSettings(userKey)}>
                    {item.activities.map((activity, actIndex) => (
                      <div className="slide" key={actIndex}>
                        <div className="content__item d-flex">
                          <div className="content__photo">
                            <img className="content__img" src={item.image_url} alt="User photo"/>
                          </div>
                          <div className="article">
                            <p className="article__text">{item.comment_text}</p>
                            <ul className="article__controls">
                              <li className="article__control-item"><a href="#">visual <i className="fa fa-eye" aria-hidden="true"></i></a></li>
                              <li className="article__control-item"><a href="#">text <i className="fas fa-comment-dots"></i></a></li>
                              <li className="article__control-item"><a href="#">edited <i className="fas fa-edit"></i></a></li>
                            </ul>
                            <div className="article__icon">
                              <a href="#" className="article__icon--blue">
                                <i className="fa fa-check-circle" aria-hidden="true"></i>
                              </a>
                              <a href="#" className="article__icon--gray"><i className="fa fa-minus-circle" aria-hidden="true"></i></a>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </Slider>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

关键说明 #

• 用用户唯一ID作为userKey比循环索引更稳定，避免数组元素增删/排序后索引错乱的问题
• 每个Slider的afterChange回调只会更新对应用户的索引，完全不会影响其他滑块的状态
• 想要获取某个用户的当前滑块索引时，直接用this.state.currentSlides[userKey] || 0即可（|| 0处理初始状态下没有索引的情况）

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