当我在视图中添加两张幻灯片时,React-slick 在 DOM 中显示 5 个幻灯片元素
Posted
技术标签:
【中文标题】当我在视图中添加两张幻灯片时,React-slick 在 DOM 中显示 5 个幻灯片元素【英文标题】:React-slick shows 5 slide elements in DOM when i have added two slides in view 【发布时间】:2019-10-18 15:57:16 【问题描述】:我在滑块中有两个元素。我注意到它实际上创建了另外 5 张幻灯片。它们的数据索引从 -1 到 3 不等。
仅渲染一个元素没有这个问题。它只显示 DOM 中的单个元素。
我正在渲染的组件在位置 1。
有什么方法可以移除 DOM 中的克隆幻灯片元素吗?
我遇到的问题是位置 -1 和 3 的幻灯片具有相同 id 的 div。
现在当我执行 document.getElementById()
时,我看不到实际组件的属性。
`
【问题讨论】:
【参考方案1】:看来您只需将 infinite:false
属性传递给选项即可解决问题。
这是因为 react slick 在视图中当前元素的两侧维护了两个 div。这是为了确保即使用户双向滚动也能发生滑动。
传递这个属性会否定这种行为
【讨论】:
以上是关于当我在视图中添加两张幻灯片时,React-slick 在 DOM 中显示 5 个幻灯片元素的主要内容,如果未能解决你的问题,请参考以下文章