reactjs - 尝试在 react 中使用scrollHeight

Question

谁能告诉我为什么当我console.log heightSet时我变得不确定？

componentDidMount() {
    this.updateDimensions();
    window.addEventListener('resize', this.updateDimensions.bind(this));
}

componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions.bind(this));
}

updateDimensions() {
    this.setState({ heightSet: document.scrollHeight });
    console.log(document.clientHeight);
}

相同的console.log适用于window.innerHeight(clientHeight也未定义)，但我不想要内部高度，我想要scrollHeight。

谢谢

Answer 1

scrollHeight 是 Element 上的一个属性，所以我猜您可能需要 document.body.scrollHeight。

顺便说一句，每次调用 this.updateDimensions.bind(this) 时，您都会获得一个新函数，因此您无法使用此方法来添加和删除相同的事件监听器。

您应该向您的类添加一个构造函数，其中包含以下内容:

constructor(props) {
    super(props);
    this.updateDimensions = this.updateDimensions.bind(this);
}

然后您可以直接添加/删除this.updateDimensions:

componentDidMount() {
    this.updateDimensions();
    window.addEventListener('resize', this.updateDimensions);
}

componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
}

updateDimensions() {
    this.setState({ heightSet: document.body.scrollHeight });
}