Год, проведённый с React: выводы и рекомендации

[hardex]

// Всё это выглядит весьма таинственно?
// На самом деле, всё не так уж и сложно, если в этом разобраться.
render() {
  const children = React.Children.map(this.props.children,
   (child, index) => {
      return React.cloneElement(child, {
        onSelect: () => this.props.onTabSelect(index)
    });    
 });  
 return children;
}

Несложно становится, если сразу не писать ненужный мусор

render() {
  return React.Children.map(this.props.children,
    (child, index) => React.cloneElement(child, {
      onSelect: () => this.props.onTabSelect(index)
    });    
  );  
}

[AmdY]

Промежуточные переменные очень удобны при отладке, да и если техническое название children заменить на нормальное вроде tabs, то ещё и читабельность повысится.

[justboris]

В реальных проектах лучше этой магии с React.Children.map и React.cloneElement не делать. Допустим, есть фрагмент:

<Parent>
   <Child />
</Parent>

Потом по каким-то причинам понадобилось завернуть компонент в дополнительный div:

<Parent>
   <div><Child /></div>
</Parent>

Все сломалось! Child больше не получает необходимое свойство, и не может нормально работать.

Для передачи значения между компонентами есть способы получше: контекст или render prop.

[faiwer]

Ладно бы <div/>, это всё-таки будущий реальный тег, но обычно даже нельзя какой-нибудь HOC навернуть, т.к. новонавешанные props-ы потеряются. В зависимости от библиотеки там что-нибудь да навернётся. Какие-то библиотеки заменяют переданные им ноды на другие, какие-то пробрасывают дополнительные поля, о которых, может не знать HOC. В общем этот Children.map может изрядно попить кровушки :)

[chak_zefir]

оставаться на переднем крае React-разработки

Думаю лучше бы звучало как: «оставаться на передовой React-разработки».