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

Question

我有一个用于渲染图像的React组件。在简化形式中，它看起来像这样：

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

我想根据一些计算（包括图像标签的宽度）动态设置图像的高度。 但是要计算图像的高度，我首先需要等待图像加载然后计算高度。 但是，当调用render方法时，高度为null，因为图片尚未加载。

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

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

Answer 1

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

<img onLoad={...} />

一般形式是在状态中有一些值，比如像这样的动态高度，有一些初始值：

this.state = {
  dynamicHeight: 0
};

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

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

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

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

一旦完成加载，这将使用新的动态高度重新渲染组件。