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

Question

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

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

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

Answer 1

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

要获取子元素的 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 节点。