当前位置：首页 > React

react如何获取无状态组件高度

2026-01-25 19:21:40React

获取无状态组件高度的方法

在React中，无状态组件（函数组件）本身没有实例，因此无法直接通过ref获取DOM元素的高度。以下是几种可行的解决方案：

使用useRef和useEffect钩子 通过React的useRef钩子创建一个引用，并将其绑定到目标DOM元素上。在useEffect中访问该引用的current属性来获取高度。

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

const StatelessComponent = () => {
  const elementRef = useRef(null);

  useEffect(() => {
    if (elementRef.current) {
      const height = elementRef.current.clientHeight;
      console.log('Height:', height);
    }
  }, []);

  return <div ref={elementRef}>Content</div>;
};

使用useLayoutEffect替代useEffect 如果需要在DOM更新后立即获取高度，可以使用useLayoutEffect。它会在浏览器绘制之前同步执行，适合需要即时测量的场景。

import React, { useRef, useLayoutEffect } from 'react';

const StatelessComponent = () => {
  const elementRef = useRef(null);

  useLayoutEffect(() => {
    if (elementRef.current) {
      const height = elementRef.current.offsetHeight;
      console.log('Height:', height);
    }
  }, []);

  return <div ref={elementRef}>Content</div>;
};

通过回调Ref获取高度 对于动态内容或需要响应高度变化的场景，可以使用回调Ref。每次组件更新时，回调Ref会被调用。

import React, { useState } from 'react';

const StatelessComponent = () => {
  const [height, setHeight] = useState(0);

  const handleRef = (node) => {
    if (node) {
      setHeight(node.getBoundingClientRect().height);
    }
  };

  return (
    <div ref={handleRef}>
      Content
      <p>Current height: {height}px</p>
    </div>
  );
};

使用第三方库 如果需要更复杂的尺寸监听（如窗口大小变化），可以考虑使用react-use-measure或resize-observer-polyfill等库。

import React from 'react';
import useMeasure from 'react-use-measure';

const StatelessComponent = () => {
  const [ref, bounds] = useMeasure();

  return (
    <div ref={ref}>
      Content
      <p>Height: {bounds.height}px</p>
    </div>
  );
};