在React.js中，使用flexGrow时出现错误的clientHeight

Question

我正在创建一个图像容器，可以自动调整每一行并保持比例，所以我使用flex，设置宽度和flexGrow后，一切看起来都很好

Demo Link

但是当我尝试获取子项的大小时，结果clientHeight不正确。

您可以看到浏览器的输出。

（使用本地构建时，代码框演示在chrome中的行为不同： 重新加载后，值突然接近代码框中的正确值。）

那么，发生了什么？我错过了什么，或者代码错了吗？

Answer 1

来自MSDN - Element.clientHeight

  

对于没有CSS或内联布局框的元素，Element.clientHeight只读属性为零，否则它是元素的内部高度（以像素为单位），包括填充但不是水平滚动条高度，边框或边距

强调我的。

我的代码沙箱输出：

1 
True Height 
233.8
Wrong Height 
239
clientWidth 
167

如果您想知道小数点差异，该链接还会注明：

  

注意：此属性将值舍入为整数。如果需要小数值，请使用element.getBoundingClientRect（）。

实际上，这里的问题与我最初的想法不同。 Working Codepen Fork

您的代码最初的问题是您在组件实际呈现给DOM之前尝试检查高度。

由于div的高度取决于窗口的大小 - 当调整窗口大小时，您需要重新计算它。

为此，我添加了一个窗口调整大小监听器：

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

我还添加了一个Handler - 每次调整窗口大小时调用 - 它会在窗口调整大小时设置状态，然后将输出记录到控制台：

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

我最初尝试在没有on window resize处理程序（直接在componentDidMount中使用setstate逻辑）的情况下工作，但它无法正常工作。在componentDidMount（）被触发时未加载图像，从而导致不正确的结果。一旦我意识到问题是什么，在调整大小时检查它的解决方案对我来说是有意义的，但我愿意接受其他建议，因为这可以实现！

如果需要在加载图像后立即获取高度，而不是在调整窗口大小之后 - 您可以将onLoad事件添加到<img>元素，如下所示：

onLoad={this.onImageLoadHandler}

从那里，您只需设置与加载图像对应的div的状态。

如果您需要进一步说明如何实现它，请告诉我，我可以更新代码集。