使用 react-slick 在轮播中显示反应组件答案

【问题标题】：Displaying react components in carousel using react-slick使用 react-slick 在轮播中显示反应组件
【发布时间】：2016-11-11 04:16:42
【问题描述】：

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

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

但似乎 react-slick 不支持这种使用方式。

JsFiddle 演示

https://jsfiddle.net/jqLzpewm/

【问题讨论】：

标签： reactjs react-slick

【解决方案1】：

你需要用 <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>

【讨论】：

【解决方案2】：

将包装器添加到组件中，它应该可以工作。

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

【讨论】：

【解决方案3】：

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

<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

【讨论】：

【解决方案4】：

它有效，这完全是关于设置旋转木马的样式。我已经更新了你的小提琴以表明它可以工作：https://jsfiddle.net/ox1ujxa4/1/

只是做了一些小造型：

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

【讨论】：