维护多个react-slick的索引

Question

我正在做一个react项目。我有一个页面，其中必须使用多个react-slick元素。我想维护每个平滑元素的索引。目前我正在做这件事

render() {
            var settings = {
            arrows: true,
            infinite: false,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            afterChange: function(currentSlide){
            this.setState({
            currentSlide: currentSlide
        })
            console.log(currentSlide);
        }.bind(this)
        };
            return (

            <div className="main-wrapper">

            {/*carousel responsive1*/}

            {this.state.users.map((item,i)=>{
                return  <div className="main-wrapper-mobile">
                    <div className="carousel responsive1">
                        <div className="mask">
                            {/*slideset */}
                            <div className="slideset">
                                {/*slide*/}

                                <Slider {...settings}>
                                    {item.activities.map((item1,i)=>{
                                        return <div className="slide">
                                            <div className="content__item d-flex">

                                                <div className="content__photo">
                                                    <img className="content__img" src={item.image_url}/>
                                                </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>

以上代码的简要说明：

我有一系列的用户。为每个用户分配一个滑块。这就是为什么我要映射用户数组并在每个映射中渲染的原因。

目前，“设置”中的" currentSlide“参数将状态"currentSlide”设置为currentSlide。问题是所有滑块的状态都发生了相同的变化。没有办法跟踪哪个滑块正在滑动。我应该能够改变或维护滑块和它的相应索引。我怎么发动汽车呢？

Answer 1

您必须为每个react-slick实例动态创建一个新的设置对象，并附加一个额外的值(在本例中，我只是添加了一个称为"Slider1“或"Slider2”的额外字符串，等等)。在afterChange的回调函数中。基本上，每当用户更改特定react滑块上的幻灯片时，currentSlide下的state都会有一个类似以下{indexSlider: "Slider1", indexOfCurrentSlide: 2 }的对象。如果这澄清了你的要求，请让我知道。我认为这是区分哪个Slider被更改的一种方式。

const MultipleSliders = () => {
  const [ currentSlide, setCurrentSlide ] = useState({})
  const generateSettings = (indexSlider) => {
    return {
      arrows: true,
      infinite: false,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      afterChange: (indexOfCurrentSlide) => {
        setCurrentSlide({
          indexSlider,
          indexOfCurrentSlide
        })
      }
    }
  }
  const settings1 = generateSettings('Slider1');
  const settings2 = generateSettings('Slider2');
  const settings3 = generateSettings('Slider3');
  return (
    <React.Fragment>
      <Slider {...settings1}>
        {/* content goes here */}
      </Slider>
      <Slider {...settings2}>
        {/* content goes here */}
      </Slider>
      <Slider {...settings3}>
        {/* content goes here */}
      </Slider>
    </React.Fragment>
  )
}