javascript - 另一个 React 组件中的新 React 模块

Question

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

我正在为我的项目使用 React Carousel 组件 (react-slick)。我想要实现的目标是，在此 block 中，我想使用我的模块“CarouselSlide”。

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

CarouselSlide 是我的 react 模块，显示单个轮播幻灯片。

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

Answer 1

根据您希望如何显示幻灯片，基础 react-slick我证明很难，因为该组件似乎在其自己的幻灯片中显示每个同级元素。使用您自己的 React 组件作为 react-slick 的子组件的问题是你的组件必须返回一个单一的 parent ，目前没有办法在你的 render 中发送多个兄弟元素。函数的返回语句。

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

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

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

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

将返回一个错误，因为您需要一个封装返回语句的单亲。

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

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

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

看看这个jsFiddle你可以看到问题。