Question

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

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

但似乎反应灵敏并不支持这种使用方式。

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>

幻灯片堆叠在彼此之上，好像所有幻灯片都被视为单张幻灯片的一部分。

我注意到反应灵敏并没有将它应该应用于每张幻灯片，即：

<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

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

return

Answer 4

您需要使用final List<Point2D.Double> list = new ArrayList<>(points.size()); for (Point point : points) { Point2D.Double aDouble = new Point2D.Double(point.getX(), point.getY()); list.add(aDouble); }包装React组件：

<div>

或者：

 <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

使用反应光滑显示旋转木马中的反应组分

4 个答案: