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

Question

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

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

任何想法，概念或类似例子？ 谢谢

Answer 1

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

或者去购买任何数量的变种。

Answer 2

我会将一个引用分配给包装器div。然后编写一个获取ref高度的函数，并在窗口调整大小时运行该函数。有点像...

<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，然后使用样式prop来控制第二个div的高度。