我正在使用 react-slick，如何将 React 组件导出为单个元素，但在渲染时删除父级 div

Question

我有一个使用 react-slick 在 react js 中构建的滑块

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

<FeatureSliderItems/>定义如下（包含要显示的幻灯片）

const FeatureSliderItems= () =>(
    <>
      <div className="slide-item">
         <h2 className="">Create multiple sub-account</h2>
      </div>
      <div className="slide-item">
         <h2 className="">Create multiple sub-account 2</h2>
      </div>
    </>
)

但我现在遇到的问题是如何让 <FeaturedSliderItems/> 中的 slide-items 出现在 <Slider/> 下作为 2 个同级幻灯片而不是在单个 div 中（在 <FeatureSliderItems/> 中导出，因为我只能在反应中的单个根元素下导出我的组件）

所以基本上我想要这个作为我的结果

<Slider ref={c => (this.slider = c)} {...settings}>
    <div className="slide-item">
      <h2 className="">Create multiple sub-account</h2>
    </div>
    <div className="slide-item">
      <h2 className="">Create multiple sub-account</h2>
    </div>
 </Slider>

而不是

<Slider ref={c => (this.slider = c)} {...settings}>
    <div>
      <div className="slide-item">
        <h2 className="">Create multiple sub-account</h2>
      </div>
      <div className="slide-item">
        <h2 className="">Create multiple sub-account</h2>
      </div>
    </div>
 </Slider>

这可能吗？

Answer 1

在我看来，您应该创建一个组件来呈现单个专题幻灯片项目。然后为每个项目使用该组件而不是单个组件来呈现多个。我只是在您的示例中看到重复的代码，这告诉我可以创建一个新组件。

<Slider {...settings}>
   {slideItems.map((item, index) => (
     <FeatureSliderItem key={index} item={item}/>
   )}   
 </Slider>

Answer 2

Slider的children需要传递一个元素数组。如果您不想在 Slider 之后使用 map 而只想使用 FeatureSliderItems。您可以更新 FeatureSliderItems return 元素数组。使用地图也是一样。

const FeatureSliderItems = () => [
  <div className="slide-item">
    <h2 className="">Create multiple sub-account</h2>
  </div>,
  <div className="slide-item">
    <h2 className="">Create multiple sub-account 2</h2>
  </div>,
];

我正在使用 react-slick，如何将 React 组件导出为单个元素，但在渲染时删除父级 div

I'm using react-slick, how can I export a React Component as a single element but remove the parent div on render

javascript

reactjs

jsx

react-component

react-slick