Javascript 拇指转盘问题（反应id刷卡器）

我试图制作一个带有拇指的“react id swiper”组件的旋转木马，但似乎主旋转木马和带有拇指的旋转木马之间没有连接

我在网上到处搜索，运气不好。还扫描了“react id swiper”文档以及该组件github上报告的所有问题

import React from "react";
import styles from "./Gallery.css";
import Swiper from "react-id-swiper";
import("react-id-swiper/src/styles/css/swiper.css");
import { Navigation } from "swiper/dist/js/swiper.esm";

import "../styles.css";

export default class Gallery extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      gallerySwiper: null,
      thumbnailSwiper: null
    };
  }

  componentWillUpdate(nextProps, nextState) {
    if (nextState.gallerySwiper && nextState.thumbnailSwiper) {
      const { gallerySwiper, thumbnailSwiper } = nextState;

      gallerySwiper.controller.control = thumbnailSwiper;
      thumbnailSwiper.controller.control = gallerySwiper;
    }
  }

  galleryRef = ref => {
    if (ref) this.setState({ gallerySwiper: ref.swiper });
  };

  thumbRef = ref => {
    if (ref) this.setState({ thumbnailSwiper: ref.swiper });
  };

  render() {
    const thumbnailSwiperParams = {
      paceBetween: 10,
      centeredSlides: true,
      slidesPerView: "auto",
      touchRatio: 0.2,
      slideToClickedSlide: true,
      onInit: swiper => {
        this.swiper2 = swiper;
      }
    };

    const params = {
      modules: [Navigation],
      slidesPerView: 1,
      zoom: {
        maxRatio: 5
      },
      spaceBetween: 30,
      loop: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      onInit: swiper => {
        this.swiper1 = swiper;
      }
    };

    return (
      <React.Fragment>
        <div className="gallery-wrapper">
          <Swiper {...params} ref={this.galleryRef}>
            <div className="swiper-slide">
              <img src="http://lorempixel.com/800/800/sports/1/" />
            </div>
            <div className="swiper-slide">
              <img src="http://lorempixel.com/800/400/sports/2/" />
            </div>
            <div className="swiper-slide">
              <img src="http://lorempixel.com/400/800/sports/3/" />
            </div>
          </Swiper>
        </div>
        <div className="thumbs-container">
          <Swiper {...thumbnailSwiperParams} ref={this.thumbRef}>
            <div className="swiper-slide1">
              <img src="http://lorempixel.com/100/100/sports/1/" />
            </div>
            <div className="swiper-slide1">
              <img src="http://lorempixel.com/100/100/sports/2/" />
            </div>
            <div className="swiper-slide1">
              <img src="http://lorempixel.com/100/100/sports/3/" />
            </div>
          </Swiper>
        </div>
      </React.Fragment>
    );
  }
}

从“React”导入React；
从“/Gallery.css”导入样式；
从“反应id Swiper”导入Swiper；
导入（“react id swiper/src/styles/css/swiper.css”）；
从“swiper/dist/js/swiper.esm”导入{Navigation}；
导入“./styles.css”；
导出默认类库扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
gallerySwiper:空，
thumbnailSwiper:空
};
}
组件将更新（下一步，下一步状态）{
if（nextState.gallerySwiper&&nextState.thumbnailSwiper）{
const{gallerySwiper，thumbnailSwiper}=nextState；
gallerySwiper.controller.control=thumbnailSwiper；
thumbnailSwiper.controller.control=gallerySwiper；
}
}
galleryRef=ref=>{
if（ref）this.setState（{gallerySwiper:ref.swiper}）；
};
thumbRef=ref=>{
if（ref）this.setState（{thumbnailSwiper:ref.swiper}）；
};
render（）{
常量thumbnailSwiperParams={
时间：10，
中心幻灯片：对，
SlideService视图：“自动”，
接触比：0.2，
slideToClickedSlide:true，
onInit:swiper=>{
this.swiper2=swiper；
}
};
常量参数={
模块：[导航]，
幻灯片视图：1，
缩放：{
最大比率：5
},
空间期:30,，
循环：对，
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”
},
onInit:swiper=>{
this.swiper1=swiper；
}
};
返回(
);
}
}

您还可以看到一个演示：

这是官方代码示例：（“带双向控制的拇指库”）

---

UPD：好吧，伙计们，Swiper并不是真的100%适合制作缩略图。所以我决定使用react slick和内置拇指功能。您可以在react slick文档中找到示例。

对于有此问题的人，当您使用自定义构建时，您必须手动导入模块，但在示例中，他们使用的库可以导入所有内容

要解决此问题，只需将以下内容添加到模块导入中：

// For version <=2.3.2
import { Swiper, Controller } from 'swiper/dist/js/swiper.esm';
// For version >=2.4.0
import { Swiper, Controller } from 'swiper/js/swiper.esm';

---

模块：[Controller]，这使得魔术

它也可能是react中的一些bug。删除“严格模式”对我很有效

替换此：

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

ReactDOM.render(
,
根元素
);

用这个

ReactDOM.render(
  <App />,
  rootElement
);

ReactDOM.render(
,
根元素
);

一切都顺利

ReactDOM.render(
  <App />,
  rootElement
);