response-slick slickNext метод - "Uncaught TypeError: Невозможно прочитать свойство" ползунок "неопределенного"

Question

Я использую карусель для быстрого реагирования с инструментом анимации Green Sock, и у меня есть ползунок и анимация для работы. Теперь проблема заключается в вызове метода slickNext, когда анимация заканчивается на слайде. Я получаю эту ошибку, независимо от того, использую я ссылки или нет (но мой "тест" работает и отображается в консоли). Документация github для этого метода немного скудна и запутана, и я не нашел подобных ситуаций, которые я мог бы использовать в качестве ссылки. Как я могу получить доступ к этому методу?

import React, { Component } from "react";
import Helmet from "react-helmet";
import AnimationStory1 from "../../components/Animation/AnimationStory1";
import AnimationStory2 from "../../components/Animation/AnimationStory2";
import AnimationStory3 from "../../components/Animation/AnimationStory3";
var Slider = require("react-slick");

export default class IntroStory extends Component {

  constructor (props) {
    super(props);
    this.state = {};
  }

  nextSlide () {
    console.log("test");
    this.refs.slider.slickNext();
  }

  render () {
//These are GreenSock animation instances
    var timeline1 = new TimelineLite({onComplete: this.nextSlide});
    var timeline2 = new TimelineLite();
    var timeline3 = new TimelineLite();

//These are settings for the react-slick slider
    var settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
//      slide: true,
      swipe: true,
      accessibility: true,
      arrows: false,
      beforeChange: function () {
        timeline1.restart();
        timeline2.restart();
        timeline3.restart();
      }
    };

    return <div>
      <Helmet title="Welcome to We Vote" />
      <div className="container-fluid well u-gutter__top--small fluff-full1 intro-story">
        <Slider ref="slider" {...settings}>
          <div key={1}><AnimationStory1 timeline1={timeline1}/></div>
          <div key={2}><AnimationStory2 timeline2={timeline2}/></div>
          <div key={3}><AnimationStory3 timeline3={timeline3}/></div>
          <div key={4}><p>This will be an image</p></div>
         </Slider>
      </div>
    </div>;
  }
}

Answer 1

Свяжите свой метод, чтобы обеспечить контекст this заботится о:

 render () {
//These are GreenSock animation instances
    var timeline1 = new TimelineLite({onComplete: this.nextSlide.bind(this)});
    var timeline2 = new TimelineLite();
    var timeline3 = new TimelineLite();

Когда ты просто проходишь, var timeline1 = new TimelineLite({onComplete: this.nextSlide})вы эффективно просто концентрируетесь на прохождении обратного вызова, но метод nextSlide использует this контекст и когда обратный вызов вызывается, вы должны убедиться, что this имеет refs в них призвать slider, Узнайте больше здесь