React中ref获取元素的宽度、高度

最新推荐文章于 2023-12-07 00:07:32 发布

夏天的一朵云

最新推荐文章于 2023-12-07 00:07:32 发布

阅读量1.5w

点赞数 4

分类专栏： react

本文链接：https://blog.youkuaiyun.com/ximenxiafeng/article/details/108136737

版权

react 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在React中利用ref属性和state管理，实现HTML段落元素的高度自适应，涉及componentDidMount生命周期方法的应用，以及scrollHeight、clientHeight等尺寸属性的区分使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义HTMLParagraphElement类型属性

pvcDesDom:HTMLParagraphElement

2.componentDidMount中获取高度。

componentDidMount() {
    setTimeout(function () {
        this.setState({
            scrollHeight: this.pvcDesDom.scrollHeight
        })
    }.bind(this))
}

3.元素上追加ref属性。

<p className={'pvd-item-describe ' + (this.state.pvdDesShow ? '' : 'pvd-item-describe-hide')} ref={dom => { this.pvcDesDom = dom }}>data</p>

4.通过this.state.scrollHeight获取高度

// 尺寸：
clientWidth  |  clientHeight     元素的内尺寸（width + padding）如果有滚动条，是可视区域高度
scrollWidth  |  scrollHeight      元素滚动内容的总高度
offsetWidth  |  offsetHeight     元素的外尺寸  (width + padding + border)
// 位置：
offsetLeft  |  offsetTop     元素相对于已定位父元素(offsetParent)的偏移量
offsetParent元素是指元素最近的定位（relative,absolute）父元素,可递归上溯，如果没有，返回body元素
ele.getBoundingClientRect()   返回元素的大小及其相对可视区域的位置
如：ele.getBoundingClientRect().left   从视口左端到元素左端边框的距离(不包含外边距)
scrollLeft  |  scrollTop     是指元素滚动条位置，它们是可写的