如何在React中操作swiper.js的滑动数组？

import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';

componentDidMount() {
  new Swiper('.swiper-container', {
    // 配置swiper的参数
    // 例如，设置滑动效果为水平滑动
    direction: 'horizontal'
  });
}

render() {
  return (
    <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>
      <div className="swiper-pagination"></div>
    </div>
  );
}

componentDidMount() {
  this.swiper = new Swiper('.swiper-container', {
    // 配置swiper的参数
    // 例如，设置滑动效果为水平滑动
    direction: 'horizontal'
  });
}

// 在需要的地方调用API方法
handleNextSlide() {
  this.swiper.slideNext();
}

handlePrevSlide() {
  this.swiper.slidePrev();
}