javascript - 如何在 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} />

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