1

我正在做一个反应项目。我有一个页面必须使用多个 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>

上述代码的简要说明：

我有一组用户。每个用户都分配有一个滑块。这就是为什么我要映射用户数组并在每个映射中进行渲染。

目前，“settings”中的“currentSlide”参数将状态“currentSlide”设置为currentSlide。问题是所有滑块的状态变化相同。无法跟踪哪个滑块正在滑动。我应该能够更改或维护滑块及其相应的索引。我该怎么做？

4

1 回答 1

1

您必须为每个 react-slick 实例动态创建一个新的设置对象，并在 afterChange 的回调函数中附加一个额外的值（在这种情况下，我只是添加了一个名为“Slider1”或“Slider2”等的额外字符串） . 基本上，每当用户更改特定反应滑块上的幻灯片时，state下方currentSlide都会有一个看起来像这样的对象{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>
  )
}
于 2020-03-10T22:04:06.310 回答