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>
    );
}

测试布局

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