在渲染之前反映DOM offsetHeight-Java 学习之路

我需要能够通过其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元素：not positioned

这是我想要渲染的位置（顶部： - （offsetHeight）px：positioned

2 回答

1
不确定它是最好的解决方案，但您可以使用的一种技术是通过组件状态跟踪您的样式，首先将其初始化为空：
```
this.state = { style: {} };
```
然后，一旦您可以成功访问您要查找的元素，就在 componentDidMount() 函数中更新该状态：
```
componentDidMount() {
  this.setState(
    {style: { top: "-" + (ReactDOM.findDOMNode(this).offsetHeight) + "px" } }
  );
}
```
如果需要将其作为支柱传递给需要它的任何子组件 .

我把一些带有一些注释的codepen放在一起，以进一步说明：http://codepen.io/anon/pen/vGwyVj
回复于 2024-04-29T09:50:32+08:00

我自己有类似的问题，一个解决方法是使用生命周期方法 componentDidMount ，因此您将需要使用受控或'smart'组件 .

DEMO

class Tooltip extends React.component {
  constructor(props) {
    super(props);
    this.state = {
      mounted: false,
      ... other state stuff
    };
  }
  ....
}

在 componentDidMount 中，您将 mounted 的状态设置为true，在这里您还可以访问您的组件：

componentDidMount() {
  this.setState({mounted: true})
  // get your style here...
}

然后在渲染函数中，您有条件地基于该状态渲染组件：

render() {
   if (this.state.mounted) {
     // return your component with the offset style
     // which you can pass in as a prop...
   } else {
     // you can return a version of the component that is not offset here, 
     // I chose not to do this, React is pretty fast. 
     }
}

回复于 2024-04-29T09:50:32+08:00

在渲染之前反映DOM offsetHeight

2 回答

相关问题