javascript - 我正在使用 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>
    </>
)

但是我现在遇到的问题是如何使slide-items in<FeaturedSliderItems/>显示<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>

这可能吗？

标签： javascriptreactjsjsxreact-componentreact-slick

Answer 1

Slider 的子节点需要传递一个元素数组。如果您不想使用mapafterSlider并且只想使用FeatureSliderItems. 您可以更新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>,
];