新的React模块位于另一个反应组件中

Question

所以，如果这是一个愚蠢的问题，请原谅。

我正在为我的项目使用React Carousel Component（react-slick）。我想要实现的目标，在这个区块内我想使用我的模块“ CarouselSlide ”。

<Slider {...settings}> //--> react-slick component tag
  <CarouselSlide/>     //--> my module
</Slider>

CarouselSlide是我的反应模块显示单个旋转木马滑动。

是否可以使用这种方式或者我是否必须编辑“ react-slick ”组件自己的源代码？

Answer 1

是的可能。你可以在组件内部组件。这就是反应的工作原理

Answer 2

根据您想要显示幻灯片的方式，我认为基础react-slick很难，因为该组件似乎在其自己的幻灯片中显示每个兄弟元素。将您自己的React组件用作react-slick的子组件的问题是您的组件必须返回单个父组件，并且当前无法在render函数的return语句中发送多个兄弟元素。

react-slick似乎需要如下设置：

<Slider {...settings}>
    <div>1</div>
    <div>2</div>
</Slider>

然后在React中创建一个组件并返回

<div>1</div>
<div>2</div>

由于您需要封装return语句的单个父级，因此会返回错误。

现在，如果您有一个更复杂的组件来定义EACH幻灯片，那么您可以执行以下操作：

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

所以它真的归结为你如何使用它。如果您想在单个组件中返回整套幻灯片，则需要编辑基本react-slick组件以允许该组件。

看看这个jsFiddle，您就会发现问题。