2

カルーセルに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

4

0 に答える 0