如何使用 swiper 在幻灯片中渲染反应动态组件？答案

【问题标题】：How do I render react dynamic components in slides with swiper?如何使用 swiper 在幻灯片中渲染反应动态组件？
【发布时间】：2022-10-14 11:51:53
【问题描述】：

我正在使用 map 方法在我的网站界面上显示从 API 获取的数据。

//mapping over search result data and passing it to search component as props
 const moveEl = searchData.map(movie =>(
      <Search id={movie.id}  name={movie.name} image={movie.poster_path} summary={movie.overview}/>
    )
---------
<div>
  {moveEl}
</div>

我想将这些数据呈现为幻灯片，但如果我不能将它们硬编码到 swiper 中，我应该怎么做？

      <Swiper watchSlidesProgress={true} slidesPerView={7} className="mySwiper">
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>

【问题讨论】：

标签： reactjs api jsx swiper.js

【解决方案1】：

您可以在 Swiper 组件中使用 map 方法。

<Swiper watchSlidesProgress={true} slidesPerView={7} className="mySwiper">
  {searchData.map(movie => (
    <SwiperSlide key={movie.id}>
      <Search id={movie.id}  name={movie.name} image={movie.poster_path} summary={movie.overview}/>
    </SwiperSlide>
  )}
</Swiper>

【讨论】：