Как использовать получить высоту родительского div тега img в React? - PullRequest
Новая
       54

Как использовать получить высоту родительского div тега img в React?

0 голосов
/ 12 января 2019

Я использую HTML-холст с React.js. Я хочу установить высоту моего холста равной высоте тела, чтобы люди могли рисовать на всей странице. 

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 выполняет рендеринг компонента, теги игнорируются.

1 Ответ

0 голосов
/ 13 января 2019

Пожалуйста, проверьте https://www.javascriptstuff.com/detect-image-load/

В реакции существует разница между отображением и загрузкой.
Я попытался получить ширину и высоту в componentDidMount (), что неверно.
Потому что в этот момент все <img> не были загружены.

Чтобы решить эту проблему, пожалуйста, посмотрите на https://www.javascriptstuff.com/react-image-gallery/

Этот пример показывает, как что-то сделать (в моем случае, получить ширину и высоту), когда <img> загружен с использованием <img onLoad={Fn} onError={Fn}>

...