Question

我在React.js中使用html canvas。我想将画布高度设置为等于车身高度，以便人们可以在整个页面上绘制。

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>

}

我的想法是先画一个画布（宽度，高度= 0）。渲染完整个布局组件后，我们可以获取布局的高度并更新画布。

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

Answer 1

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

在react中，渲染与加载之间是有区别的。
我试图在componentDidMount（）中获取宽度和高度，这是错误的。
因为这时尚未加载所有<img>。

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

此示例说明了在使用<img>加载<img onLoad={Fn} onError={Fn}>时如何进行操作（以我为例，获取宽度和高度）

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

1 个答案: