reactjs - 在 React.js 中，使用 flexGrow 时得到错误的 clientHeight

Question

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

Demo Link

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

可以看到浏览器的输出。

(当使用本地构建时，codesandbox 演示在 chrome 中表现不一样: 重新加载后，值突然接近 codesandbox 中的正确值。)

所以，这是怎么回事？我是不是遗漏了什么，或者代码有误？

Answer 1

来自 MSDN - Element.clientHeight

The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

强调我的。

我的代码沙盒输出:

1 
True Height 
233.8
Wrong Height 
239
clientWidth 
167

如果您想知道小数点差异，该链接还指出:

Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

---

其实这里的问题和我一开始想的不一样。 Working Codepen Fork

您的代码最初的问题是您试图在组件实际呈现给 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 事件添加到 <img>元素，像这样:

onLoad={this.onImageLoadHandler}

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

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