response-id-swiper Невозможно установить свойство 'control' из неопределенного - PullRequest
Новая
       16

response-id-swiper Невозможно установить свойство 'control' из неопределенного

0 голосов
/ 13 марта 2019

Проблема, с которой я столкнулся, заключается в том, что я хочу создать два свипера, чтобы их слайд синхронизировался, используя миниатюры и элемент управления не работал, прежде всего мне нужно знать, почему они не работают, например, этот или Есть и другой способ добиться этого, показ слайдов, где вы используете .map и визуализируете изображения, текст и другие материалы, отправляемые из моего API. 

  42 | }
  43 | 
  44 | thumbRef(ref) {
> 45 |   if (ref) this.setState({ thumbnailSwiper: ref.swiper });
     |           ^  
  46 | }
  47 | render() {
  48 |   const params = {  




import React, { Component } from "react";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import Swiper from "react-id-swiper";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      apiUrl: API,
      original: [],
      thumbnail: [],
      gallerySwiper: null,
      thumbnailSwiper: null
    };
    this.galleryRef = this.galleryRef.bind(this);
    this.thumbRef = this.thumbRef.bind(this);
  }

  componentDidMount() {
    axios({
      url: (`${this.state.apiUrl}`),
      method: "post",
      data: JSON.stringify({ refresh: "true", editor_id: "13" })
    }).then(res => {
      this.setState({ original: res.data.output.items });
      this.setState({ thumbnail: res.data.output.items });
    });
  }

  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 params = {
      containerClass: "action_itemsContainer",
      slidesPerView: 1,
      spaceBetween: 20,
      slidesPerGroup: 1,
      autoplay: true,
      loop: true,
      loopFillGroupWithBlank: false,
      rebuildOnUpdate: true,
      crossFade: true
    };
    const thumbnailParams = {
      containerClass: "action_itemsThumb",
      direction: "vertical",
      slidesPerView: 3,
      spaceBetween: 5,
      slidesPerGroup: 1,
      autoplay: true,
      loop: true,
      loopFillGroupWithBlank: false,
      rebuildOnUpdate: true
    };

    return (
      <React.Fragment>
        <div className="container">
          <div className="row">
            <div className="col">
              <Swiper {...params} ref={this.galleryRef}>
                {this.state.original.map((items, i) => {
                  return (
                    <div key={i.toString()}>
                      <img className="img_editors" src={items.thumb_url} />
                    </div>
                  );
                })}
              </Swiper>
            </div>
            <div className="col">
              <Swiper {...thumbnailParams} ref={this.thumbRef}>
                {this.state.thumbnail.map((items, i) => {
                  return (
                    <div key={i.toString()}>
                      <img className="thumb_editors" src={items.thumb_url} />
                    </div>
                  );
                })}
              </Swiper>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
...