开发者问题收集

获取 React 元素 offsetTop

2017-11-15
1821

在 react 中,当我在 componentDidMount 中获取元素的 offsetTop 时,它与在 componentDidUpdate() 中调用时相同元素的 offsetTop 值不同。这是为什么?我以为 componentDidMount 是在 render 之后调用的,因此 DOM 元素被放置在页面中,所以 offsetTop 值应该是正确的。

class Index extends React.Component {
    ...
    render() {
        return (
            <div className="site-wrapper">
                <TopHeader />
                <IntroSection />
            </div>
        );
    }
}


class TopHeader extends React.Component {
    ...
    componentDidMount() {
        var rect = ReactDOM.findDOMNode(this).offsetTop;
        console.log(rect);
    }
}


class IntroSection extends React.Component {
    ...
    componentDidMount() {
        var rect = ReactDOM.findDOMNode(this).offsetTop;
        console.log(rect);
    }
}
1个回答

componentDidMount 仅被调用一次。但是,组件收到的每次更新都会调用 componentDidUpdate ,即使通过状态或属性也是如此。

因此,我们建议在两种生命周期方法中将 offsetTop 保留在组件状态中。

Abdennour TOUMI
2017-11-15