React 在同一个组件使用多个 swiper 踩坑

当我写完两个 swiper 轮播图 组件之后,在引入的时候出现了问题
发现 两个轮播图会互相影响 ,
解决方案如下

第一个 swiper 组件 ----------
  render() {
    
    return (
      <div className="find-bannerBox">
        <div className={
   "swiper-container"}>  // <--- 这里我使用原生的类名
          <div className={
   "swiper-wrapper"}>
            <div className={
   "swiper-slide"}>Slide 1</div>
            <div className={
   "swiper-slide"}>Slide 2</div>
            <div className={
   "swiper-slide"}>Slide 3</div>
            <div className={
   "swiper-slide"}>Slide 4</div