javascript - 如何在 React 中使用获取 img 标签的父 div 的高度？

Question

我正在使用带有 React.js 的 html 画布。我想将我的画布高度设置为等于正文的高度，以便人们可以在整个页面上绘制。

import IMG from "../../assets/img/contact-img.jpg";
 constructor(props){
        super(props);
        this.state ={
            width:0,
            height:0
        }
    }
componentDidMount(){
    let newState = {
        width:this.myRef.current.getBoundingClientRect().width,
        height:this.myRef.current.getBoundingClientRect().height
    };
    this.setState(newState);

}
render(){

        <div>
            <DrawableCanvas width={this.state.width} height={this.state.height}/>
            <img src={IMG} />
        </div>

}

我的想法是先画一个画布(width,height=0)。整个布局组件渲染完成后，我们可以获取布局的高度并更新画布。

问题是当有子标签时我无法正确获得高度。但我成功地在 Chrome 控制台中获得了高度。似乎当 React 渲染组件时，标签被忽略了。

Answer 1

请检查https://www.javascriptstuff.com/detect-image-load/

在反应中，被渲染和被加载是有区别的。
我试图在 componentDidMount() 中获取宽度和高度，这是错误的。
因为此时此刻，一切<img>都没有被加载。

要解决此问题，请查看https://www.javascriptstuff.com/react-image-gallery/

这个例子展示了如何在<img>使用加载时做一些事情（在我的例子中，获取宽度和高度）<img onLoad={Fn} onError={Fn}>