Get `props.children` DOM handle: `React.findDOMNode(child)`

When trying to use React.findDOMNode on a props.children item(ReactElement), an error is thrown.

Uncaught Error: Invariant Violation: Element appears to be neither ReactComponent nor DOMNode

Here is a small demo that shows off the problem.

React.Children.forEach(this.props.children, (child) => {
    console.log(React.findDOMNode(child));        
});

The parent component is mounted console.log('isMounted', this.isMounted()); -> isMounted true.

---

Related to #1602 and #1373.

Additionally the behavior of didMount and didUpdate handlers are currently undefined in regards to when they fire in relation to their children and therefore refs. For example componentDidUpdate is not guaranteed to fire after the children has fully mounted.

From sebmarkbage, Source

[MadLittleMods]

@spicyj Thank you for the info and correction.

Here is a working demo with React.cloneElement. React.addons.cloneWithProps is deprecated:

// `render`
React.Children.map(this.props.children, (child) => {
    return React.cloneElement(child, {
        ref: `item-${child.props.key}`
    });
});

// ...

// `componentDidMount` or `componentDidUpdate`
React.Children.forEach(this.props.children, (child) => {        
    console.log(React.findDOMNode(this.refs[`item-${child.props.key}`]));        
});

[gaearon]

I strongly recommend against doing invasive transformations like this. This kind of code is brittle and difficult to use and understand. Wrap the children in a <div> and get a ref to that div explicitly instead.