How to defeat ReactDOM.findDOMNode(child) in React.Children.forEach?

Question

React

I can’t solve this problem for two hours, because there are examples in Google, but for some reason they don’t work for me.
ReactDOM.findDOMNode(child) in React.Children.forEach says that child must be a component instance... Here is an example https://jsbin.com/suhutulili/edit?js ,console

Answer 1

No no no, there is not much logic here. children are components not installed in the node's DOM. You can do something like this https://jsbin.com/casomojovo/edit?js,console . And already through refs you can pull out 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')
);