当前位置：首页 > React

react如何判断卡片的高度

2026-01-25 07:29:50React

判断卡片高度的方法

在React中，可以通过多种方式获取卡片元素的高度。以下是几种常见的方法：

使用useRef和useEffect钩子

通过useRef获取DOM节点的引用，结合useEffect在组件渲染完成后读取高度。

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

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

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

  return (
    <div ref={cardRef}>
      {/* 卡片内容 */}
      <p>卡片高度: {height}px</p>
    </div>
  );
}

使用ResizeObserver API

动态监听元素尺寸变化，适用于响应式布局。

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

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

  useEffect(() => {
    const observer = new ResizeObserver(entries => {
      for (let entry of entries) {
        setHeight(entry.contentRect.height);
      }
    });

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

    return () => {
      if (cardRef.current) {
        observer.unobserve(cardRef.current);
      }
    };
  }, []);

  return (
    <div ref={cardRef}>
      {/* 卡片内容 */}
      <p>卡片高度: {height}px</p>
    </div>
  );
}

使用getBoundingClientRect

获取元素相对于视口的位置和尺寸信息。

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

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

  useEffect(() => {
    if (cardRef.current) {
      const rect = cardRef.current.getBoundingClientRect();
      setHeight(rect.height);
    }
  }, []);

  return (
    <div ref={cardRef}>
      {/* 卡片内容 */}
      <p>卡片高度: {height}px</p>
    </div>
  );
}