如何始终获取 React 组件的顶级 DOM 节点？答案

【问题标题】：How to always get React component's top-level DOM node?如何始终获取 React 组件的顶级 DOM 节点？
【发布时间】：2017-06-29 06:07:04
【问题描述】：

我得到了this.props.jsx，它是一个 React 组件或一个 DOM 节点。

我想挂载React.cloneElement(this.props.jsx, ref: { 'myElement' });，然后访问this.refs.myElement

问题在于 ref 实际上是一个Connect 对象，如果我导出那个对象{ withRef: true } 然后调用getWrappedInstance()，结果仍然是一个React 组件，而不是React 组件的DOM 节点

我怎样才能始终为已安装的 React 组件获取顶级 DOM 节点？

我目前正在追求ReactDOM.findDOMNode()

我什至能想到的唯一解决方案是定位一个包装器 ref 并访问该 ref 的孩子，但硬编码一个幻数似乎很愚蠢。

【问题讨论】：

在大多数情况下不鼓励使用ReactDOM.findDOMNode()，因为它会穿透组件抽象。也许值得解释为什么你首先需要这样做，以便我们可以确定这不是XY Problem。
@trixn 我需要测量 DOM 上组件的大小以确定它是否应该停靠到标题

【解决方案1】：

我错误地认为ReactDOM.findDOMNode(this.refs.myElement) 已被弃用，但它仍然得到完全支持，并且使这个过程变得更加容易......

不必getWrappedInstance() 或导出{ withRef: true }

【讨论】：