我正在尝试使用react-slick在走马灯中展示我的自定义组件:
<Slider {...settings}>
<Hello />
<Hello />
</Slider>
但是似乎react-slick不支持这种用法。
JsFiddle演示
我正在尝试使用react-slick在走马灯中展示我的自定义组件:
<Slider {...settings}>
<Hello />
<Hello />
</Slider>
但是似乎react-slick不支持这种用法。
JsFiddle演示
它可以正常工作,这与轮播样式有关。我已经更新了您的fiddle以展示其工作原理:https://jsfiddle.net/ox1ujxa4/1/
只需进行一些小的样式调整:
<div style={{display: 'inline-block', width: 500}}>
Hello
</div>
<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>
<Slider {...settings}>
{
slideTitles.map((title) => {
return <Slide title={title} />;
});
}
</Slider>
<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>
{{链接1:JsFiddle}}
<Slider {...settings}>
<div>
<Hello />
<Hello />
</div>
</Slider>