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

发布时间：2020-12-15 06:43:29 所属栏目：百科来源：网络整理

导读：使用v0.13.0中引入的React.findDOMNode方法，我能够通过在this.props.children上映射来获取传递到父组件的每个子组件的DOM节点。然而，如果一些孩子碰巧是React元素而不是组件(例如，一个孩子是通过JSX创建的 div)，React会抛出一个不变的违规错误。有没有

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!