我已经在一个 React 应用中成功使用了 swiper，这些是 npm 安装后的步骤，

import Swiper from "swiper"; 
import "swiper/css/swiper.css";

并且行 import 'swiper/js/swiper.min.js' 是不必要的，因此请删除它

然后您可以在 componentDidMount 中初始化 swiper 实例，就像已经完成的那样。

这是来自 swiper 的简单封面流滑块。将其粘贴到组件中并将其导入到您的 App.js 中

import React, { Component } from "react";
import Swiper from "swiper";
// CSS
//swiper css must come first
import "swiper/css/swiper.min.css";
// your custom css must come second to overwrite certain stylings in swiper.css
import "./CoverFlowCarousel.css";

class CoverFlowCarousel extends Component {
  componentDidMount() {
    this.swiper = new Swiper(".swiper-container", {
      grabCursor: true, // little hand cursor over slides
      loop: true, // allows the slides to loop from the last slide back to the first 
      // in that direction
      centeredSlides: true, // helps to center the slides
      slidesPerView: 2, // allows the slide you're looking at to be the centered slide 
      // with the slide before and the slide after to be hanging just off the page 
      // from the left and right of it
      parallax: true, // Helps focus the users attention to the slide in front/center
      effect: "coverflow",
      coverflowEffect: {
        rotate: 50, // Slide rotate in degrees
        stretch: 0, // Stretch space between slides (in px)
        depth: 100, // Depth offset in px (slides translate in Z axis)
        modifier: 1, // Effect multipler
        slideShadows: true, // Enables slides shadows
      },
      pagination: {
        el: ".swiper-pagination", // little dots under the slides for navigation
        clickable: true, // allows you to click on the little dots
      },
      navigation: {
        nextEl: ".swiper-button-next", // arrows on the side of the slides
        prevEl: ".swiper-button-prev", // arrows on the side of the slides
      },
    });
   }
  render() {
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className="swiper-slide">Cover Flow Slide 1</div>
          <div className="swiper-slide">Cover Flow Slide 2</div>
          <div className="swiper-slide">Cover Flow Slide 3</div>
          <div className="swiper-slide">Cover Flow Slide 4</div>
        </div>
        <div className="swiper-pagination" />
        <div className="swiper-button-prev" />
        <div className="swiper-button-next" />
      </div>
    );
  }
}

export default CoverFlowCarousel;

如果幻灯片的数据是从服务器加载的，我建议在 componentDidUpdate 中初始化 swiper。如果您从服务器获取数据（通常在 componentDidMount 中调用），并在那里调用 swiper init，那么 swiper 将无法正常工作。例如，在我的情况下，循环根本不起作用。我做了很多实验，然后想出了这个想法。

更确切地说，如果幻灯片的数据存储在状态对象中，则必须调用 swiper init。例如，在类组件中：

  state = {
    Swiperdata: []
  }

 componentDidMount() {
    axios.get(`/carouseldata`)
      .then(res => {
        this.setState({ Swiperdata: res.data })
      })
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.Swiperdata !== this.state.Swiperdata) {
      var swiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        autoplay: {
          delay: 5000,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        slidesPerView: 1,
        slidesPerColumn: 1,
        loop: true,
        reverseDirection: true,
        stopOnLastSlide: false,
        loopAdditionalSlides: 1000,
        preloadImages: true,
        updateOnImagesReady: true,
        effect: 'fade'
      })
  }

render() {
  return(
          <div class="swiper-container">
            <div class="swiper-wrapper">
              {this.state.Swiperdata.map((item, i) =>
                <div key={item.id} className='swiper-slide'>
                    <img src={`/images/${item.photo}`} />
                </div>
              )}
            </div>
            <div className="swiper-button-next"></div>
            <div className="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
          </div>
  )
}