javascript - componentDidMount() 中的高度值错误

Question

这三个console.log()来自这里：

import React from 'react';

export default class FixedTopNavigation extends React.Component {
    constructor(props) {
        super(props);
        this.topNav = React.createRef();
    }
    componentDidMount() {
        console.log(this.topNav.current.offsetHeight);
        console.log(this.topNav.current.clientHeight);
        console.log(this.topNav.current.scrollHeight);
    }
    render() {
        return (
            <nav ref={this.topNav} id="topNav" className="fixed-top navbar navbar-expand-md navbar-light bg-light">
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#sideNav" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <a className="navbar-brand" href="/">Biometrics</a>
            </nav>

        )
    }
}

all 返回18而不是45.13 （或至少其中一个，它是在开发控制台中查看时导航栏的渲染高度）

如果componentDidMount()没有返回正确的值，那么正确获得正确值的方法是什么？

大多数答案/教程或多或少都使用相同的方式（除了创建 ref 的方式），这就是为什么我不明白为什么这段代码不起作用。

标签： javascriptreactjs

Answer 1

有两种方法可以实现这一目标。

使用 setTimeout() 破解

componentDidMount() {
  setTimeout(() => {
    console.log(this.topNav.current.clientHeight);
  }, 1);
}

使用 findDOMNode()

componentDidMount() {
  let compRef = ReactDOM.findDOMNode(this.topNav);
  console.log(this.compRef.clientHeight);
}