반응 슬릭 slickNext 메서드 - "Uncaught TypeError : 정의되지 않은 'slider'의 속성을 읽을 수 없습니다.

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 컨텍스트와 콜백이 호출 될 때 slider을 호출하려면 에 refs이 있어야합니다. Read more here