另一个 React 组件中的新 React 模块
New React module inside another react component
所以,如果这是一个愚蠢的问题,请原谅。
我正在为我的项目使用 React Carousel 组件 (react-slick)。我想实现的是,在这个块中我想使用我的模块“CarouselSlide”。
<Slider {...settings}> //--> react-slick component tag
<CarouselSlide/> //--> my module
</Slider>
CarouselSlide 是我的反应模块,显示单个轮播幻灯片。
是否可以使用这种方式,或者我是否必须编辑“react-slick”组件自己的源代码?
是的,有可能。你可以在内部组件components.This React 的工作原理
根据您希望如何显示幻灯片,基础 react-slick
我证明很难,因为该组件似乎在其自己的幻灯片中显示每个同级元素。使用你自己的 React 组件作为 react-slick
的子组件的问题是你的组件必须 return 一个单一的父组件,并且目前没有办法在你的 render
函数的 return声明。
react-slick
似乎需要如下设置:
<Slider {...settings}>
<div>1</div>
<div>2</div>
</Slider>
然而在 React 中创建组件并 returning
<div>1</div>
<div>2</div>
会 return 出错,因为您需要单父封装 return 语句。
现在,如果您有一个更复杂的组件来定义每张幻灯片,您可以执行以下操作:
<Slider {...settings}>
<MyComponent />
<MyComponent />
</Slider>
所以这真的归结为你如何使用它。如果您想 return 在单个组件中使用整套幻灯片,您需要编辑基础 react-slick
组件以允许这样做。
看看这个jsFiddle,你就会发现问题所在。
所以,如果这是一个愚蠢的问题,请原谅。
我正在为我的项目使用 React Carousel 组件 (react-slick)。我想实现的是,在这个块中我想使用我的模块“CarouselSlide”。
<Slider {...settings}> //--> react-slick component tag
<CarouselSlide/> //--> my module
</Slider>
CarouselSlide 是我的反应模块,显示单个轮播幻灯片。
是否可以使用这种方式,或者我是否必须编辑“react-slick”组件自己的源代码?
是的,有可能。你可以在内部组件components.This React 的工作原理
根据您希望如何显示幻灯片,基础 react-slick
我证明很难,因为该组件似乎在其自己的幻灯片中显示每个同级元素。使用你自己的 React 组件作为 react-slick
的子组件的问题是你的组件必须 return 一个单一的父组件,并且目前没有办法在你的 render
函数的 return声明。
react-slick
似乎需要如下设置:
<Slider {...settings}>
<div>1</div>
<div>2</div>
</Slider>
然而在 React 中创建组件并 returning
<div>1</div>
<div>2</div>
会 return 出错,因为您需要单父封装 return 语句。
现在,如果您有一个更复杂的组件来定义每张幻灯片,您可以执行以下操作:
<Slider {...settings}>
<MyComponent />
<MyComponent />
</Slider>
所以这真的归结为你如何使用它。如果您想 return 在单个组件中使用整套幻灯片,您需要编辑基础 react-slick
组件以允许这样做。
看看这个jsFiddle,你就会发现问题所在。