Question

我尝试获取元素的scrollHeight，如果它高于offsetHeight，则向底部添加填充但在两种情况下都得到相同的值，就好像元素没有完全呈现一样什么的。

这就是我设置它的方式：

componentDidMount(){
    this.checkHeight();
}
componentDidUpdate() {
    this.checkHeight();
}

checkHeight = () => {
    if(this.section){
        window.section = this.section;
        console.log(this.section.offsetHeight, this.section.scrollHeight, ReactDOM.findDOMNode(this.section).scrollHeight);
    }
};

render() {
    return (
        <section className={classes.Admin}>
            <ul className={classes.Navbar}>
                <NavbarItem link="/admin" exact clicked={this.changeSectionHandler}>Main</NavbarItem>
                <NavbarItem link={this.props.match.url + '/users'} clicked={this.changeSectionHandler}>Users</NavbarItem>
            </ul>
            <div className={classes.Section} ref={section => this.section = section}>
                <Switch>
                    <Route path={this.props.match.url} exact component={Main}/>
                    <Route path={this.props.match.url + '/users'} exact component={Users}/>
                    <Route path={this.props.match.url + '/users/:id'} exact component={Users}/>
                    <Route path={this.props.match.url + '/users/add'} exact component={Users}/>
                    <Redirect to="/admin"/>
                </Switch>
            </div>
        </section>
    );
}

如果我在加载页面后在控制台中获取了section.offsetHeight和section.scrollHeight的值，则它们是正确的。

我肯定会卡在这里，我了解到componentDidMount仅在安装了内部组件时被触发但我不知道componentDidUpdate所以我猜问题就在那里（当我打开可滚动页面时，componentDidUpdate函数被触发，componentDidMount暂时没用。）

Answer 1

我认为这是因为当React事件触发时，实际的屏幕渲染还没有完全完成（并不是我要说明的，这只是我的建议）。

尝试做

componentDidMount(){
    setTimeout(this.checkHeight, 0);
}

componentDidUpdate(){
    setTimeout(this.checkHeight, 0);
}

componentDidMount中的React element.scrollHeight是错误的

1 个答案: