javascript - 获取 React 元素 offsetTop

Question

当我在 componentDidMount 中获取元素的 offsetTop 时， react 与在 componentDidUpdate() 中调用时同一元素的 offsetTop 值不同。这是为什么？我认为 componentDidMount 在渲染后被调用，因此 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);
    }
}

Answer 1

componentDidMount 被调用一次且仅一次。但是，组件收到的每个更新都会调用 componentDidUpdate，即使是通过 state 或 props 也是如此。

然后，我们建议在两种生命周期方法中将 offsetTop 持久保留在组件状态中。