javascript - 为什么在react的componentDidMount方法执行时，获取不到DOM被渲染完成的属性？

问题描述

问 题

我在开发一个React application。

当我在componentDidMount下使用findDOMNode获取某个对象的offsetHeight属性时，总是得不到它实际的值。

后来发现是因为在此时该DOM还没有渲染完成，在外面包覆一层window.onload就可以了。

可是componentDidMount方法在执行时，DOM不是已经渲染完成了吗？那么为什么会出现这种情况呢？

下面放一小段代码：

    componentDidMount() {

        // let _this = this;
        // window.onload = function(){


        let imgFigureDOM = findDOMNode(_this.refs.imgFigure0),
            imgW = imgFigureDOM.scrollWidth,
            imgH = imgFigureDOM.scrollHeight;
        // }
   }

可以得到DOM元素正确的scrollWidth，然而scrollHeight返回的值却是还没有加载完成的一个、不等于DOM实际高度的数值。

解决方案

componentDidMount代表DOM渲染完成，但是不代表img加载完成。
可以用img标签的onload属性。

这篇关于javascript - 为什么在react的componentDidMount方法执行时，获取不到DOM被渲染完成的属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！