Javascript 在生命周期中，在何处设置组件的高度？

我有一个问题，我正在使用React网格组件来显示多个图表。如果你想象网页是一个

4x4

网格，我有两个图表。每个图表都是一个

4x2

网格项。网格库使用行高来表示图表有多大（y轴）——因此想象一下，如果行高静态设置为

100px

，那么网格将是

宽度x 400px

网格

出现这个问题的原因是，为了不同的显示，或者考虑是否有人将应用程序最小化（而不是全屏），图表将呈现的组件的高度是可变的。我可以通过以下方式获得部件的高度

：

return (
  <div
    className="content absolute top right left bottom"
    ref={divElement => this.divElement = divElement}
  >
  ...

我可以用这种方法获得

的高度，但是除了eslint抱怨之外，还有一个明显的警告，那就是它会导致组件的重新渲染，这是不好的

---

我的问题是，如果有更好的方法来完成同样的任务，我应该如何处理？是否有另一种更好的生命周期方法（实际上并不认为有）。只是我必须等到图表所在的

被呈现出来，我才能说图表应该有多大

出于好奇，高度可以用动态单位设置吗，比如

%

或

vh

？静态。图表中的网格项可以调整大小，以占用更少的网格方块，但每个方块的高度必须先静态设置

componentDidMount() {
  const height = this.divElement.clientHeight
  this.setState({ height })
}