react-slick slickNext方法 - 「未捕獲TypeError：無法讀取未定義的屬性」滑塊「

Question

我正在使用Green Sock動畫工具的react-slick旋轉木馬，並且我已經獲得了滑塊和動畫的工作。現在的問題是當動畫在幻燈片上結束時調用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。 Read more here