reactjs - Swiper renderExternal example in Virtual Slides with React 渲染

Question

需要使用 Swiper 将Custom React 组件数组 呈现为Virtual Slides。

文档说 renderExternal 可以用于此，但 API 文档中没有示例 http://idangero.us/swiper/api/#virtual

需要了解如何使用 renderExternal 函数完成此操作。

Answer 1

我不确定这是最好的方法，但我大致就是这样做的:

const mySwiper = new Swiper('.swiper-container', {
  virtual: {
    slides: this.props.array (or this.state.array)
    renderExternal: function(data){}
  }
})

然后您在模板中显示您的组件:

<div className="swiper-container">
  <div className="swiper-wrapper">
    <MyComponent
      myProps="mySwiper.virtual.slides[mySwiper.activeIndex]"
    />
  </div>
</div>

(我是用 Vue 做的，不是 React)