javascript - 在第一页加载时 react 不准确地计算 div 的高度

Question

我正在寻找一种可靠的策略来计算内部有许多 child 的 parent 的高度，无论 child 是图像、视频还是字体等。(想想作品集内容)

可以在此处找到该问题的一个简单示例:

https://codesandbox.io/s/wrong-height-tkvcm?file=/src/useHeight.js:347-545

---

图像加载缓慢，因此计算函数过早触发。并且由此产生的高度计算完全关闭。

我尝试过的事情

• 计算所有图像的比率，明确设置图像高度。这行得通，但我仍然有视频、字体、缓慢的 API 也需要加载。所以这个策略感觉非常打地鼠。

• 调整观察者。也无法可靠地等待内容加载。性能昂贵。还有这个issue .

• React setState/useEffect/array 依赖项。让我走得很远，但最终还是失败了，因为很难知道哪个状态将最后触发以更新高度计算。

• 我尝试了 React 并发模式以尝试在计算开始之前预加载内容。对于非 API 情况，这似乎有些矫枉过正。我只需要担心本地镜像和 Assets 。

  React.useEffect(() => {
    updateHeight();
    window.addEventListener("resize", updateHeight);
    return () => {
      window.removeEventListener("resize", updateHeight);
    };
  }, [updateHeight]);

我确实认为使用 React 预加载内容是最好的方法，但我很想知道是否还有其他人试图解决计算内部包含大量内容的巨大容器的尺寸问题？

更复杂的例子: https://codesandbox.io/s/stupefied-wilson-qzb1i?file=/src/components/CaseWrapper/index.js:756-836

Answer 1

大小差异可能是由于您使用的自定义字体造成的。当您刷新页面时，您会注意到字体加载后文本发生了变化。

尝试删除 base.css 中的所有 @font-face，问题就会消失。

或者，您可以在计算高度之前等待 document.fonts.ready 回调。

React.useEffect(() => {
  document.fonts.ready.then(function () {
    console.log('Fonts currently being used on the page are now loaded.');
    // Calculate height now
  });  
}, []);