我有一个用于渲染图像的 React 组件。简单来说,它看起来像这样:
function Image(props) {
return <img src="..." height={...} />
}
我想根据一些计算动态设置图像的高度(包括图像标签的宽度)。
但要计算图像的高度,我首先需要等待图像加载,然后计算高度。
但当调用 render
方法时,高度为 null
,因为图像尚未加载。
组件渲染和图像加载时设置高度的正确方法是什么?
正如我所写,为了计算图像的高度,我使用图像的宽度 - 如何访问 DOM 元素(图像标签)以便根据元素的宽度计算高度?
最佳答案
您可以做的是使用图像的事件处理程序,特别是图像的 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} />
完成加载后,这将使用新的动态高度重新渲染组件。
关于javascript - 如何在 React 中根据宽度动态设置图像高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47561698/