В React.js неверный clientHeight получил, когда использовать flexGrow

Question

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

Демонстрационная ссылка

Но когда я пытаюсь получить размер дочернего элемента, результат clientHeight не верен.

Вы можете увидеть выходные данные браузера.

(и демо коды и коробки не ведут себя одинаково в chrome при использовании локальной сборки: после перезагрузки значение внезапно оказывается близким к правильному значению в кодах кода.)

Итак, что происходит?Я что-то упустил или код неправильный?

Answer 1

С MSDN - Element.clientHeight

Свойство Element.clientHeight, доступное только для чтения, равно нулю для элементов без CSS или встроенных блоков макета, в противном случае это внутренняя высотаэлемент в пикселях, включая отступ, но не горизонтальную полосу прокрутки, границу или поле.

Выделение мое.

Ваш код для песочницы выведен для меня:

1 
True Height 
233.8
Wrong Height 
239
clientWidth 
167

Если вас интересует разница в десятичной запятой, ссылка также отмечает:

Примечание. Это свойство округляет значение до целого числа.Если вам нужно дробное значение, используйте element.getBoundingClientRect ().

---

На самом деле, проблема здесь иная, чем я изначально думал. Рабочая вилка Codepen

Изначально проблема с вашим кодом заключалась в том, что вы пытались проверить высоту до фактического отображения компонента в DOM.

Поскольку высотаdiv зависит от размера окна - при изменении размера окна вам нужно будет пересчитать его.

Для этого я добавил прослушиватель изменения размера окна:

  componentDidMount() {
    window.addEventListener("resize", this.updateHeightHandler);
  }

Я также добавил обработчик - вызывается каждый раз при изменении размера окна - который устанавливает состояние изменения размера окна, а затем записывает вывод в консоль:

updateHeightHandler = () => {
  console.log("UPDATE HEIGHT HANDLER");
  this.setState({
    div1Height: this.div1.clientHeight,
    div2Height: this.div2.clientHeight,
    div3Height: this.div3.clientHeight
  });
  this.logHeightHandler();
};

Сначала я пытался заставить это работать безобработчик изменения размера окна (с логикой установки состояния непосредственно в componentDidMount), и он не работал.Изображения не были загружены к моменту запуска componentDidMount (), что привело к неверным результатам.Как только я понял, в чем проблема, решение проверить ее на изменение размера имело смысл для меня, но я открыт для альтернативных предложений, как это можно сделать!

---

Если это требование, чтобы получитьвысота сразу после загрузки изображений, а не после изменения размера окна - вы можете добавить событие onLoad к элементу <img>, например, так:

onLoad={this.onImageLoadHandler}

Оттуда вы просто установите состояниедля div, соответствующего загружаемому изображению.

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