react-slick slickNextメソッド - "Uncaught TypeError：未定義のプロパティ 'slider'を読み取ることができません。

Question

私はGreen Sockアニメーションツールで反応滑らかなカルーセルを使用しています。スライダとアニメーションが機能しています。問題は、アニメーションがスライド上で終了するときにslickNextメソッドを呼び出すことです。私は、refsを使うかどうかにかかわらず、このエラーを受け取り続けます（しかし、私の "テスト"は動作していて、コンソールに表示しています）。このメソッドの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を確保するためにあなたの方法をバインド

の世話をされています。あなただけ渡すと、あなたが効果的にだけでコールバックを渡すことに集中しますが、この方法nextSlideの使用されている var timeline1 = new TimelineLite({onComplete: this.nextSlide}) 、

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

コンテキストがthisであり、コールバックが呼び出されたときには、thisにrefsがあり、sliderを呼び出す必要があります。 Read more here