カルーセルにreact-slickというプラグインを使用しています。動的スライドを持つカルーセルを実装しようとしましたが、レンダリング時に各スライドを初期化していないようです。スライダーが子の前に初期化されたためですか?
this.extractData は基本的に json オブジェクトを取得します
createCarousel = () => {
let data = this.extractData();
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return(
<Slider {...settings}>
{data.map(function(object, i){
return <testLayout data={object} key={i} />;
})}
</Slider>
);
};
render() {
return (
<div className="difference">
{this.createCarousel()}
</div>
);
}
testLayout
import React, { Component } from 'react';
class testLayout extends Component {
render() {
let item = this.props.data.items;
return (
<div className="slide">
<img src={item.imgUrl} alt=""/>
<p>{item.text}</p>
</div>
);
}
}
export default testLayout;
どんな助けでも大歓迎です。ありがとう
更新 - 修正が見つかりましたhttps://github.com/akiran/react-slick/issues/328