在渲染之前反映DOM offsetHeight

Question

我需要能够通过其offsetHeight定位React DOM元素.

问题是我无法收集尚未创建的元素的offsetHeight(因此高度不能作为参数传递给渲染函数)而且我也无法计算渲染函数内部的高度,如上所述在React DOM refs docs中:

永远不要访问任何组件的render方法中的refs - 或者任何组件的render方法甚至在调用堆栈中的任何位置运行.

DOM元素应相对于单击的图标进行渲染以显示它.

组件树:

|— FormInputGroup
  |— Label
    |— TooltipIcon
  |— Tooltip
  |— Input

工具提示图标的渲染功能:

const TooltipIcon = ({ attribute, setCurrentTooltip }) => (
  <Icon
    name="tooltip"
    style={{
      position: "relative",
      top: "1px",
      marginLeft: "10px",
      "cursor": "pointer",
    }}
    onClick={() => setCurrentTooltip(attribute)}
  />
)

渲染功能:

const Tooltip = ({ title, content, setCurrentTooltip }) => (
  <div className="popover"
    style={{
//      top: "-"+ ReactDOM.findDOMNode(this).offsetHeight +"px",
    }}
  >
    <h3 className="popover-title">{title}</h3>
    <div className="popover-close-button"
      onClick={() => setCurrentTooltip(null)}
    />
    <div className="popover-content">{content}</div>
  </div>
)

这是没有定位的DOM元素: 未定位

这里是我想被渲染(与顶部的位置: - (的offsetHeight)PX: 定位的

Answer 1

不确定这是最好的解决方案，但您可以使用的一种技术是通过组件状态跟踪您的样式，首先将其初始化为空：

this.state = { style: {} };

然后，componentDidMount()一旦您可以成功访问您正在查找的元素，就更新函数中的状态：

componentDidMount() {
  this.setState(
    {style: { top: "-" + (ReactDOM.findDOMNode(this).offsetHeight) + "px" } }
  );
} 

如果需要的话，将其作为道具传递给任何需要它的子组件。

我将一个带有一些注释的代码笔放在一起以进一步说明：http://codepen.io/anon/pen/vGwyVj