问题：使用三方组件swiper轮播的过程中，点击轮播的部分内容，会出现事件无效的问题。原因在于，swiper设置loop=true时，会生成虚拟slide进行填充，对这些虚拟slide元素进行操作无效。
解决方法：

1 禁止循环轮播，设置loop=false

此时的所有slide元素都是真实的，可以操作

2 将数据绑定到每一个slide上

将每条数据的唯一标识绑定到slider上，然后在on中添加click事件的监听，通过getAttribute获取元素标识定位到具体数据

const list = [{ id: '111', xxx }, { id: '222', xxx }, { id: '333', xxx }, { id: '444', xxx }]

mySwiper.current = new Swiper(swiperRef.current, {
      loop: true,
      xxx,
      on: {
		click: function(e) {
			const val = e.target // 获取当前点击的元素
			const isClick = val.getAttribute('data-click') // 获取点击元素的点击状态
			if (!isClick) return // 过滤无用点击
			const id = val.getAttribute('data-id') // 获取绑定的id
			const clickItem = list.find(it => it.id === id)
			...... // 点击后的操作
		}
	  }
    })

<div ref={swiperRef} className={'swiper-container'}>
	<div className={swiper-wrapper'}>
		{
            list.map(({ id }, index) => {
              return <div key={index} className={'swiper-slide'}>
                <div data-id={id} data-click={true}></div>
              </div>
            })
          }
    </div>
</div>