reactjs – 从React子元素获取DOM节点

使用v0.13.0中引入的React.findDOMNode方法，我能够通过在this.props.children上映射来获取传递到父组件的每个子组件的DOM节点。

然而，如果一些孩子碰巧是React元素而不是组件(例如，一个孩子是通过JSX创建的< div>)，React会抛出一个不变的违规错误。

有没有办法获得正确的DOM节点的每个孩子后挂载无论什么类的孩子是？

this.props.children应该是ReactElement或ReactElement的数组，而不是组件。

要获取children元素的DOM节点，您需要克隆它们并为它们分配一个新的引用。

render() {
  return (
    <div>
      {React.Children.map(this.props.children,(element,idx) => {
        return React.cloneElement(element,{ ref: idx });
      })}
    </div>
  );
}

然后，您可以通过this.refs [childIdx]访问子组件，并通过ReactDOM.findDOMNode(this.refs [childIdx])检索其DOM节点。