使用react-slick在轮播中显示react组件

Question

我正在尝试使用react-slick在carousel中显示我的自定义组件：

    <Slider {...settings}>
        <Hello />
        <Hello />
    </Slider>

但是react-slick似乎不支持这样的使用方式。

JsFiddle演示

https://jsfiddle.net/jqLzpewm/

Answer 1

它的工作，这一切都是关于样式的旋转木马。我已经更新了你的小提琴，以显示它是有效的：https://jsfiddle.net/ox1ujxa4/1/

只做了一些次要的样式：

<div style={{display: 'inline-block', width: 500}}>
  Hello
</div>

Answer 2

我今天遇到了这个问题。我有一个无状态的Slide组件，我正在做这样的事情：

<Slider {...settings}>
    {
        slideTitles.map((title) => {
            return <Slide title={title} />;
        });
    }
</Slider>

幻灯片堆叠在一起，就好像所有的幻灯片都被当作一个幻灯片的一部分。

我注意到react-slick没有将它应该应用到每个幻灯片的属性，即：

<div data-index="3" 
     class="slick-slide" 
     tabindex="-1" style="outline: none; width: 146705px;" 
     data-reactid=".0.0.1.0.$original3">

以下是解决方案(至少对于无状态组件)：

<Slider {...settings}>
{
    slideTitles.map((title) => {
        return Slide({title});
    });
}
</Slider>

JsFiddle

Answer 3

你需要用<div>包装你的React组件

 <Slider {...settings}>
    <div>
        <Hello />
    </div>
    <div>
        <Hello />
    </div>
 </Slider>

或者：

<Slider {...settings}>
    {
        slideItems.map((slideItem) => (
            <div key={slideItem.id}>
                <Slide title={slideItem.title}/>
            </div>
        ))
    }
</Slider>

data-index、class、tabindex和style属性将添加到该<div>中