Реагирует на выбор высоты div при загрузке DOM

Question

У меня проблемы с реакцией Plotly, которая отображается правильно, когда выбран график, загруженный в скрытую вкладку. Кажется, это известная проблема, когда каждая вкладка, но вкладка по умолчанию не будет соответствующим образом изменять размер, потому что не знает размеров скрытого графика.

Чтобы обойти это, я хотел бы динамически обновить высоту вкладки, чтобы равна высоте вкладки по умолчанию. Примерно так: Изменить высоту div, когда выбрана вкладка .

Проблема в том, что я не могу выбрать значение высоты вкладки при загрузке DOM. Я думал, что мог бы добавить функцию componentDidMount с Evenlistener для загрузки окна следующим образом:

    constructor(props) {
        super(props)
        this.state = {
            value: 0
        };
        this.handleLoad = this.handleLoad.bind(this);
    }

    componentDidMount() {
        window.addEventListener('load', this.handleLoad);
    }

    handleLoad() {
        console.log("firstTab height: " + $('#firstTab').offsetHeight)
    }

Эта проблема, журнал консоли выводит firstTab height: undefined.

Когда я проверяю веб-страницу и поместите команду $ ('# firstTab'). offsetHeight в консоль, я могу прийти с высотой 697 пикселей.

Я не хочу жестко задавать размер пикселя вкладки. Кто-нибудь может подсказать мне, почему я не могу определить высоту элемента при загрузке окна?

Answer 1

Я думаю, что вместо использования прослушивателя событий вы можете сделать что-то вроде этого.

componentDidMount() {
    const height = this.firstTab.clientHeight;
    console.log(height) // => gives you height
}

render() {
    return (
      <div 
        id="firstTab"
        ref={ (firsTabElement) => { this.divElement = firstTabElement } }
      >
        Tab Content
      </div>
    )
  }

После первого рендеринга, если вы не скрываете или не ставите условие удаления firstTab из DOM. Он будет доступен вам в componentDidMount жизненном цикле.

Answer 2

Попробуйте использовать свойство clientHeight.

componentDidMount() {
    const height = document.getElementById('firstTab').clientHeight;
}