Как в React извлекать информацию из children?

Question

[monochromer]

Всем привет!
Есть такой API для задания настроек таблицы:

<Grid>
  <Column field="ProductID" />
  <Column field="ProductName" />
  <GridToolbar>
    <button onClick={this.saveToPDF}>save to pdf</button>
    <button onClick={this.saveToXLS}>save to xls</button>
  </GridToolbar>
</Grid>

Здесь дочерние компоненты используются не для прямого рендеринга, а для задания настроек таблицы - какие поля выводить из массива данных, ширина колонок и пр. Также есть панель инструментов, где есть, например, кнопки для экспорта данных.

Собственно вопрос - как при фильтровании children понять, какой элемент является Column, какой GridToolbar и т.д.? Есть ли какие-либо хорошие практики для этого? Склоняюсь к тому, чтобы проверять свойство type.name, которое вроде как должно быть названием компонента, т. е. 'Column', 'GridToolbar' и т. д.

Answer 1

[Антон Спирин]

Мы использовали похожий прием, но с другой целью. Мы передавали в виджет формы всех шагов какого либо процесса как детей и рендерили только текущий.
То, что вы хотите сделать можно реализовать примерно так:

class Grid extends React.Component {
  getContent() {
    const { children } = this.props;

    if (!children) return null;

    return React.Children.map(children, (child, index) => {  // или forEach без return, в зависимости от целей
      const { displayName } = child.type;

      switch (displayName) {
        case 'Column':
          // do something
        default:
          // do something other
      }
    });
  }

  render () {
    return (
      <Wrapper>
       {this.getContent()}
      </Wrapper>
    )
  }
}

Comments

[monochromer]

Ну, да примерно то, что нужно