Question

我正在尝试在电子商务网站上创建滑块。我想在滑块内添加一些卡组件。众多组件具有交互性，能够将产品添加到购物车。但是，由于swiper克隆了幻灯片，因此部分幻灯片无法按我希望的那样工作。

我使用简单的嵌套组件创建了example。

const Counter = props => {
  const [val, setVal] = React.useState(0);

  return <div>
    <button onClick={e => setVal(val + 1)}>+</button>
    <span>{val}</span>
    <button onClick={e => setVal(val - 1)}>-</button>
  </div>
}

const Swiper = ReactIdSwiper.default;

const params = {
  loop: true,
  slidesPerView: 3,
  spaceBetween: 50
}

ReactDOM.render(<Swiper {... params}>
      {[1,2].map(slide => <div key={slide} class="swiper-slide">Slide {slide} <Counter/></div>)}
    </Swiper>, document.getElementById('app'));

在此示例中，第1个和第2个计数器正在工作，但是第3个（与第1个重复）只是一个静态的html。

是否可以使用swiper使用嵌套组件创建滑块（该滑块已在网站上使用）？如果没有，是否有工作滑块？

react-id-swiper嵌套的交互式组件

0 个答案: