javascript - React如何动态地将带有高度的offsetTop设置为div

我正在网站的仪表板部分工作，对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。

最佳答案

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

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

不要忘记在卸载组件之前将其删除：

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

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