Javascript 如何根据React中的宽度动态设置图像高度？

我有一个用于渲染图像的React组件。在简化形式中，它如下所示：

function Image(props) {
   return <img src="..." height={...} />
}

功能图像（道具）{
返回
}

我想根据一些计算动态设置图像的高度（包括图像标记的宽度）。 但是要计算图像的高度，我首先需要等待图像加载，然后计算高度。 但是当调用

render

方法时，高度为

null

，因为图像尚未加载

• 当组件渲染和图像加载时，设置高度的正确方法是什么

• 正如我所写的，为了计算图像的高度，我使用了图像的宽度——如何访问DOM元素（图像标记），以便根据元素的宽度计算高度

---

您可以为图像使用事件处理程序，特别是图像的

onLoad

事件：

<img onLoad={...} />

然后，创建一个事件处理程序，在图像加载时设置这些值：

onLoad(image, imageElement) {
  this.setState({
    dynamicHeight: //do something to imageElement's width to calculate height
  });
}

然后使用图像元素中的值：

<img onLoad={...} height={this.state.dynamicHeight} />

---

加载完成后，这将以新的动态高度重新加载组件。

您可以对图像使用事件处理程序，特别是图像的

onLoad

事件：

<img onLoad={...} />

然后，创建一个事件处理程序，在图像加载时设置这些值：

onLoad(image, imageElement) {
  this.setState({
    dynamicHeight: //do something to imageElement's width to calculate height
  });
}

然后使用图像元素中的值：

<img onLoad={...} height={this.state.dynamicHeight} />

加载完成后，这将以新的动态高度重新加载组件