时间戳

首页 > 解决方案 > 反应如何动态地将带有高度的offsetTop设置为div

javascript - 反应如何动态地将带有高度的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。

标签： javascriptreactjsoffset

解决方案

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

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

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

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

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

推荐阅读