reactjs - 为什么使用 React 在不同组件中的两个 Glide js 实例会导致应用程序崩溃？

Question

我已经关注了glide js的文档以及在此处和 GitHub 存储库上发布的一些问题以及关注；共有三个分量App.js, MainSlider.js, GallerySlider.js.

// App.js

import React, {useEffect} from "react";
import Glide from "@glidejs/glide";

const App = () => {
  return (
    <div className="App">
      <MainSlider/>
      <GallerySlider/>
    </div>
  );
}

export default App;

// MainSlider.js

import React, {useEffect} from "react";
import Glide from "@glidejs/glide";

const sliderOptions = {
  gap: 0,
  autoplay: 8000,
  hoverpause: false,
  animationDuration: 0,
};

const MainSlider = () => {
  const mainGlide = new Glide(".main__glide", sliderOptions);

  useEffect(() => {
    return () => {
      mainGlide.mount();
    };
  }, [mainGlide]);

  return (
    <div className="main__glide">
      <div className="glide__track" data-glide-el="track">
        <ul className="glide__slides">
         <li className="glide__slide">
          // Slider 1
        </li>
         <li className="glide__slide">
          // Slider2
        </li>
         <li className="glide__slide">
          // Slider 3
        </li>
       </ul>
     </div>
   </div>
  )

// MainSlider.js

import React, {useEffect} from "react";
import Glide from "@glidejs/glide";

const sliderOptions = {
  gap: 0,
  autoplay: 8000,
  hoverpause: false,
  animationDuration: 0,
};

const GallerySlider = () => {
  const galleryGlide = new Glide(".gallery__glide", sliderOptions);

  useEffect(() => {
    return () => {
      galleryGlide.mount();
    };
  }, [galleryGlide]);

  return (
    <div className="gallery__glide">
      <div className="glide__track" data-glide-el="track">
        <ul className="glide__slides">
         <li className="glide__slide">
          // Slider 1
        </li>
         <li className="glide__slide">
          // Slider2
        </li>
         <li className="glide__slide">
          // Slider 3
        </li>
       </ul>
     </div>
   </div>
  )

这些组件之所以分开是因为我在我的应用程序的许多不同页面中使用它们。但是，控制台并没有报错，只有无限加载，最后crash。