从React子元素获取DOM节点

Question

但是，如果有些子元素碰巧是React元素而不是组件（例如，其中一个子元素是通过JSX创建的

)，React将抛出一个不变的冲突错误。

是否有一种方法可以在挂载后获得每个子节点的正确DOM节点，而不管子节点是什么类？

匿名用户

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节点。

Answer 1

相关问题

Answer 2

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节点。