React如何动态地将offsetTop的高度设置为div

Question

我正在网站的仪表板部分工作，对Reactjs来说我还是一个新手。我正在尝试将所有内容都放在屏幕上，以便用户不必滚动查看该表，希望下面的代码更好地定义这种情况。

这是我的代码：

componentDidMount() {
    this.tableHeightOffset();
}

tableHeightOffset() {
    var getOffset = this.containerLine.offsetTop;
    this.setState({ getOffset });
}

render() {

    var findTableHeight = this.state.getOffset;
    const tableHeight = {
      height: 'calc(100vh - ' + findTableHeight + 'px' + ')'
    }

    return (
        <div className="table-responsive" style={tableHeight} ref={el => this.containerLine = el}>
    )
}

当浏览器调整大小或网站上有更新时，如何获取偏移量以进行更改？

而且我也得到了findTableHeight的值，但是它没有从窗口顶部获得偏移量。我本来想得到161px的offsetTop，但我只有46px。

Answer 1

这里您有API来监听窗口大小的更改https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event，使用它来动态更改偏移量。

Answer 2

您可以为窗口定义调整大小的侦听器，以计算新的高度。这可以在componentDidMount（）中完成：

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

在卸载组件之前，请不要忘记删除它：

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

Also offsetTop还返回父级的偏移量。为了找到相对于文档的偏移量，请查看此文章：Finding element's position relative to the document