Как победить ReactDOM.findDOMNode(child) в React.Children.forEach?

Question

[copal]

Часа два не могу решить эту проблему, так как в гугле есть примеры, но они у меня почему-то не работают.
ReactDOM.findDOMNode(child) в React.Children.forEach говорит что child должен быть инстенсом компонента... Вот пример https://jsbin.com/suhutulili/edit?js,console

Answer 1

[Никита Гущин]

Не не не, тут не много не такая логика. children - это компоненты, не установленные в ДОМ ноды. Можно сделать что-то вроде такого https://jsbin.com/casomojovo/edit?js,console. И уже через refs вы можете вытащить DOMNode

class Container extends React.Component {
   constructor(props){
     super(props);
   }
   
   componentDidMount(){
     console.log('componentDidMount', Object.keys(this.refs));
     // outputs: [ 'ch0', 'ch1' ]
   }
   
   render(){
     
     return (
       <div>{React.Children.map(this.props.children, (ch, i) => React.cloneElement(ch, { ref: 'ch' + i }))}</div>
     );
   }
}

ReactDOM.render(
  <Container>
    <div>hello</div>
    <div>world</div>
  </Container>, 
  document.querySelector('.main-container')
);

Comments

[copal]

Смотрите, если children это компоненты, тогда что такое this в самом компоненте? Просто если вывести в консоль child из forEach и this в любом компоненте, то выводятся совершено разные объекты, даже визуально.

[Никита Гущин]

copal: тут ситуация примерно как с https://facebook.github.io/react/docs/more-about-r... . children - это компонент, а уже по ref - инстанс. this ссылается на инстанс.