反应如何将具有高度的 offsetTop 动态设置为 div

Question

I am working on a dashboard part of a site and i am very new to reactjs. I am trying fit everything on a screen so that the user does not have to scroll expect for the table, i hope the code below defines the situation better.

Here is my code:

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}>
    )
}

How do i get the offset to change when the browser resize or there is a update on the site ?

Also I get the value on findTableHeight but it is not getting the offset from to the top of the window. I was suppose to get 161px of offsetTop but i am only getting 46px.

Answer 1

You could define a resize listener to the window, in order to calculate the new hight. This could be done in componentDidMount():

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

Don't forget to remove it before unmounting the component:

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

Also offsetTop returns the offset from the parent. In order to find the offset relative to the document, check this article: Finding element's position relative to the document

Answer 2

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