Reactjs 在React.js中，使用flexGrow时获得了错误的clientHeight

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

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

您可以看到浏览器的输出

（并且当使用本地构建时，codesandbox演示在chrome中的行为不同： 重新加载后，该值会突然接近codesandbox中的正确值。）

那么，发生了什么事？是我遗漏了什么，还是代码错了？

来自

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

我的

您的代码沙盒输出：

1 
True Height 
233.8
Wrong Height 
239
clientWidth 
167

如果您想知道小数点的差异，该链接还将说明：

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

---

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

代码最初的问题是，您试图在组件实际呈现到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中使用setstate逻辑）实现此功能，但它不起作用。在激发componentDidMount（）时未加载图像，因此导致错误的结果。一旦我意识到问题是什么，在调整大小时检查它的解决方案对我来说是有意义的，但我愿意接受其他建议，以了解如何实现这一点

---

如果要求在加载图像后立即获得高度，而不是在调整窗口大小后-您可以向

元素添加onLoad事件，如下所示：

onLoad={this.onImageLoadHandler}

从那里，您可以简单地设置与加载的图像对应的div的状态

---

如果您需要关于如何实现的更多说明，请告诉我，我可以更新代码笔。

我不知道这里发生了什么，但我的浏览器输出是“错误高度18”哇，就是这样，我只是忘记了

onLoad

。你真的帮了我！