JS，React - 使用 div 块计算动态创建区域的高度答案

【问题标题】：JS, React - calculate height of dynamically created area with div blocksJS，React - 使用 div 块计算动态创建区域的高度
【发布时间】：2023-03-24 16:45:01
【问题描述】：

我正在寻找一种 JS / React 解决方案来计算可拖动 div 块（具有不同宽度）的高度或行数。需要高度来计算虚线边框内的内容高度，等于 (viewport - draggable_blocks_height)。

您可以想象，在调整窗口大小/更改分辨率以及拖动块/删除或添加到 draggable_blocks_container 期间，计算应该动态进行。

有什么想法、概念或类似的例子吗？谢谢

【问题讨论】：

您可以在浮动 div 的容器上放置一个 ref，并在数据/大小发生变化时通过 innerHeight 属性获取 div 的高度。 React Ref Docs.
innerHeight 可用于document.window。其他 DOM 元素有 clientHeight stackoverflow.com/questions/22675126/…

标签： javascript reactjs

【解决方案1】：

https://www.npmjs.com/package/react-height

或者去 npm 购买任意数量的变体。

【讨论】：

react-height 看起来非常不错，但正如我所见，此解决方案目前不响应窗口调整大小等。
好点。看起来他们可以在 window.onresize github.com/nkbt/react-height/blob/master/src/ReactHeight.js 上使用事件
问题是使用什么来支持调整大小。提到的代码使用 getElementHeight 作为道具函数。我知道我可以使用 getElementHeight 等特定方法在组件生命周期钩子上添加调整大小侦听器，但在 React 方面我并不是特别有经验。这就是我问的原因。
它看起来与@Jon 下面的建议非常相似。您可以选择是在父组件中执行一次，还是像示例（react-height）中那样将其变成可重用的包装器。无论哪种方式，您的父组件都会通过回调得到通知。

【解决方案2】：

我会将 ref 分配给包装器 div。然后编写一个获取参考高度的函数并在窗口调整大小时运行该函数。比如……

<dif ref={(div) => this.Wrapper = div}>
  {/* blocks */}
</div>

function calcHeight() {
  const rect = this.Wrapper.getBoundingClientRect();

  return rect.height;
}

componentDidMount() {
   window.addEventListener('resize', this.calcHeight());
}

对你想要做什么有点困惑，但是如果你想在另一个 div 中镜像高度，请将计算的高度设置为 state，然后使用样式道具来控制第二个 div 的高度。

【讨论】：

是的，这是一个关于如何解决这个问题的想法，但是性能呢？调整大小通常被认为是糊状的。
将 window.resize 与下划线或 lodash debounce/throttle 函数一起使用应该有助于避免在窗口大小不断变化时进行昂贵的计算