维护多个 react-slick 的索引

Posted 2023-02-25

【中文标题】维护多个 react-slick 的索引

【英文标题】：Maintaining index of multiple react-slick

【发布时间】：2018-05-14 10:27:12

【问题描述】：

我正在制作一个反应项目。我有一个页面必须使用多个 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。问题是所有滑块的状态变化相同。无法跟踪哪个滑块正在滑动。我应该能够更改或维护滑块及其相应的索引。我该怎么做？

【问题讨论】：

github.com/akiran/react-slick/issues/629你可以在这里找到它

这不是我想要的。您提供的链接的解决方案已经在我的问题中的代码中到位。我问了多个滑块的问题。维护一个滑块的索引是直截了当的。在多个滑块的情况下，维护每个滑块的索引是我正在寻找的。​​span>

问题仍然是模棱两可的，因为在单张幻灯片中很容易获得当前索引，但如果有多个slidesToShow，您想获得哪个索引...假设有三个slidesToShow = 3 然后我们得到所有三个的索引那么这里有什么问题？

如何获取用户正在滑动的幻灯片。假设有 3 个幻灯片。用户转到第一个并滑动两次。现在用户转到第二个并滑动 3 次。现在如何分别记录和维护这两个事件？

这个问题涉及组件是否提供成为受控组件的能力。不幸的是，我对 api 的努力表明答案是否定的......

【参考方案1】：

您必须为每个 react-slick 实例动态创建一个新的设置对象，并在回调中附加一个额外的值（在这种情况下，我只是添加了一个名为“Slider1”或“Slider2”等的额外字符串） afterChange 的功能。基本上，每当用户更改特定反应滑块上的幻灯片时，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>
  )

【讨论】：

这是本网站的低质量答案，可能会让您被否决。如果您将所有（或只是相关部分）发布的代码作为固定版本发布，这就是这里回答问题的事实标准。在您失去一些声誉之前对其进行编辑或删除。 :)