Реакция Как динамически установить 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

Вы можете определить слушателя изменения размера окна, чтобы вычислить новую высоту. Это можно сделать в componentDidMount ():

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

Не забудьте удалить его перед размонтированием компонента:

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

Также offsetTop возвращает смещение от родителя. Чтобы найти смещение относительно документа, проверьте эту статью: Поиск позиции элемента относительно документа

Answer 2

Здесь у вас есть API для прослушивания изменения размера окна https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event, используйте его для динамического изменения смещения.