Как пробросить один компонент, в другой?

Question

[Kafkae]

Есть слайдер с картинками, и я хочу пробросить не img (которые не получается сделать по умолчанию), а например уже карточку с товарами и например другими пропсами. Но я не понимаю как это как пробросить через пропсы. Как это можно проще решить. https://codesandbox.io/s/ly8vp183p9

Answer 1

[0xD34F]

const ItemComponent = props => (
  <div>
    <p>{props.title}</p>
  </div>
);

...

<Carousel
  items={items}
  ItemComponent={ItemComponent}
/>

UPD. https://codesandbox.io/s/42p1q66589

Comments

[Kafkae]

Спасибо, а как сделать если мне нужно дефолтный тег? Я хочу сделать если ничего не передается, хочу сделать стандартный поставить например img?

[0xD34F]

Kafkae, ну сделайте отдельный компонент и в render'е Carousel, когда деструктурируете props, подставляйте его в качестве дефолтного значения для ItemComponent. Можете открыть ссылку из ответа ещё раз, добавил пример.

[Kafkae]

0xD34F, Спасибо большое

Answer 2

[Андрей Охотников]

Пробросить компонент можно так

<Carousel>
        <div>
          <p>text</p>
        </div>
</Carousel>

В компоненте Carousel он будет доступен через props.children

Comments

[Kafkae]

А нельзя сделать так(знаю можно, но не понимаю как )

[Егор Живагин]

Kafkae, так - как?)

[Kafkae]

Егор Живагин, С ссылкой что то нет так(