Как осуществить поиск по детям в компоненте?

Question

[Александр Вульф]

Привет, коллеги :)
Мне опять нужна ваша помощь. Начал я делать компонент вкладки+страницы. Делаем такую верстку:

<MyPages>
  <page>
    <tab>Заголовок вкладки</tab>
    <content>текст при активной вкладке</content>
  </page>
  <page>
    <tab>Заголовок вкладки</tab>
    <content>текст при активной вкладке</content>
  </page>
</MyPages>

При рендере этого компонента я через props.children достаю всех детей (страницы) и иду по ним мапом. В каждой итерации я достаю еще детей и первого из них делаю табом, второго страницой.
Так вот вопрос: верно ли я организовал обработку детей? Или есть какой-то более верный способ? А-ля child.$('tab').each

Comments

[Everything_is_not_so_bad]

Вопрос "верно ли я организовал обработку детей?" может быть неверно истолкован людьми вне ИТ. :)

[Александр Вульф]

Роман Мирр: ;)

Answer 1

[Андрей Антропов]

Существует метод *React.Children.map* для таких целей, хотя тут возможно решение

<MyPages>
  <Page tab={} content={} />
  <Page tab={} content={} />
<MyPages/>

Эту структуру можно создавать сразу не подключая первый метод. То есть если изначально есть структура типа

pages = [
  {tab='Заголовок вкладки', content='текст при активной вкладке'},
  {tab='Заголовок вкладки', content='текст при активной вкладке'}
]

Ее сразу можно рендерить в страницы

Comments

[Александр Вульф]

Я имел ввиду то, что сейчас я могу вставить вместо например и он прекрасно это распознает.

[Александр Вульф]

Андрей Антропов, вместо <tab /> например <abc />

[Андрей Антропов]

Александр Вульф: Так а чем предложенный вариант на это не похож, нужно видимо больше окружения получить