javascript - 维护多个 react-slick 的索引
问题描述
我正在做一个反应项目。我有一个页面必须使用多个 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。问题是所有滑块的状态变化相同。无法跟踪哪个滑块正在滑动。我应该能够更改或维护滑块及其相应的索引。我该怎么做?
解决方案
您必须为每个 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>
)
}
推荐阅读
- wordpress - 如何仅在主页上使标题类别具有不同的颜色
- pyarrow - 如何过滤 pyarrow pyarrow.lib.Date32Value 值?
- node.js - 托管反应应用程序和快速服务器cpanel
- javascript - 停止 VS Code 抱怨 `require`s
- r - ESPN Play-By-Play 中一系列事件的 Web 抓取图像 URL
- kubernetes - 如何在 Stackdriver 日志中检测 GKE 自动升级节点
- r - 汇总表中的组件产品
- gnuplot - 如何在gnuplot中找到标签的颜色数量?
- wordpress-gutenberg - InnerBlocks renderAppender 不做任何事情
- neo4j - 如何从节点对象获取子图?