css - React：获取元素的高度，并且 this.ref 当前为空

Question

如何获取组件内 div 的高度？我有以下代码：

constructor(...) {
  ...
  this.detailsRef = React.createRef();
}

render() {
  return (
    <div>
      <span>A title</span>
      <div ref={this.detailsRef}>Some details</div>
    </div>
  );
 }

我读过你可以通过这样做来获得元素的高度：

this.detailsRef.current.clientHeight

或者

this.detailsRef.clientHeight

但是，这对我不起作用。有人有什么建议吗？

回答

好的，我没有得到高度的原因this.detailsRef.current.client是因为我div的ref附件是由styled-components. 因此，当我将样式组件 div 更改为普通 div 时，它起作用了。

标签： cssreactjsref

Answer 1

像这样：

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.headerRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.headerRef.current.clientHeight);
  }

  render() {
    return (
      <div>
        <h1 ref={this.headerRef}>Grab this element</h1>
      </div>
    );
  }
}