Как распечатать массив из children?

Question

[Сергей]

Всем привет!

Есть библиотека react-swiper.
Мне необходимо сделать для ui-кита н сколько компонентов оберток над этим слайдером.
Пример работы слайдера:

<Swiper>
        <SwiperSlide>Слайд 1</SwiperSlide>
        <SwiperSlide>Слайд 2</SwiperSlide>
        <SwiperSlide>Слайд 3</SwiperSlide>
 </Swiper>

Для того чтобы сделать слайд нужно дополнительно запихнуть контент в SwiperSlide компонент, это то что мешает обернуть его дополнительным компонентом.

Пример обертки

const Carousel = ({ children }) => {
  return (
    <>
      <Swiper>
         <SwiperSlide>{ children }</SwiperSlide>
      </Swiper>
    </>
  );
};

// Вызов

<Carousel>
      <div>1</div>
       <div>2</div>
       <div>3</div>
</Carousel>

Получаю 1 слайд, который будет состоять из 3 дивов. Возможно ли каждый чайлд отдельный распечатать через SwiperSlide внутри компонента?

Answer 1

[0xD34F]

<Swiper>
  {children.map(n => <SwiperSlide>{n}</SwiperSlide>)}
</Swiper>

Comments

[Сергей]

Спасибо!