当前位置：首页 > React

react如何获取元素高度

2026-01-24 22:43:54React

获取元素高度的常用方法

在React中获取元素高度可以通过以下几种方式实现：

使用useRef和useEffect钩子

通过React的ref系统获取DOM节点并测量其高度：

import React, { useRef, useEffect, useState } from 'react';

function Component() {
  const elementRef = useRef(null);
  const [height, setHeight] = useState(0);

  useEffect(() => {
    if (elementRef.current) {
      setHeight(elementRef.current.clientHeight);
    }
  }, []);

  return <div ref={elementRef}>测量这个元素的高度: {height}px</div>;
}

使用ResizeObserver API

对于需要响应尺寸变化的场景，可以使用ResizeObserver：

import React, { useRef, useEffect, useState } from 'react';

function Component() {
  const elementRef = useRef(null);
  const [height, setHeight] = useState(0);

  useEffect(() => {
    const observer = new ResizeObserver(entries => {
      setHeight(entries[0].contentRect.height);
    });

    if (elementRef.current) {
      observer.observe(elementRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return <div ref={elementRef}>动态高度: {height}px</div>;
}

使用getBoundingClientRect

获取更精确的尺寸信息，包括边框和填充：

useEffect(() => {
  if (elementRef.current) {
    const rect = elementRef.current.getBoundingClientRect();
    console.log('元素高度:', rect.height);
  }
}, []);

类组件中的实现

对于类组件，可以通过createRef实现：

react如何获取元素高度

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.elementRef = React.createRef();
    this.state = { height: 0 };
  }

  componentDidMount() {
    this.setState({
      height: this.elementRef.current.offsetHeight
    });
  }

  render() {
    return <div ref={this.elementRef}>高度: {this.state.height}px</div>;
  }
}