0
我正在使用Green Sock動畫工具的react-slick旋轉木馬,並且我已經獲得了滑塊和動畫的工作。現在的問題是當動畫在幻燈片上結束時調用slickNext方法。無論我是否使用引用,我都會收到此錯誤(但我的「測試」正在工作並顯示在控制檯中)。這個方法的github文檔有點困難和混亂,我還沒有發現任何類似的情況,我可以用作參考。我怎樣才能訪問這個方法?react-slick slickNext方法 - 「未捕獲TypeError:無法讀取未定義的屬性」滑塊「
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>;
}
}
這工作 - 謝謝! – sclem
@sclem然後選擇標記答案:) –