React中如何获取map循环渲染的每个元素的尺寸？

方法一：维护refs数组统一处理 #

通过useRef创建数组存储每个元素的DOM引用，在组件挂载或数据更新后，遍历数组获取尺寸并计算设置max-height：

import { useRef, useEffect } from 'react';

function YourComponent({ listings }) {
  // 初始化refs数组，存储每个列表项的DOM引用
  const listingRefs = useRef([]);

  useEffect(() => {
    // 当listings更新或组件挂载完成后，遍历refs计算尺寸
    listingRefs.current.forEach((ref) => {
      if (!ref) return;
      // 获取元素实际高度（包含边框、内边距）
      const elementHeight = ref.offsetHeight;
      // 替换为你的max-height计算逻辑，示例取原高度的80%
      const targetMaxHeight = elementHeight * 0.8;
      ref.style.maxHeight = `${targetMaxHeight}px`;
    });
  }, [listings]); // 依赖listings，数据变化时重新计算

  return (
    <div>
      {listings.map((listing, index) => (
        <div
          key={index} // 建议替换为listing的唯一id，避免元素复用导致ref混乱
          className={styles.listing}
          // 用回调ref给数组对应索引赋值
          ref={el => listingRefs.current[index] = el}
        >
          listing {index}
        </div>
      ))}
    </div>
  );
}

方法二：单个元素回调ref直接处理 #

如果不需要复用refs，可在每个元素的ref回调里直接完成尺寸获取和max-height设置，更轻量化：

function YourComponent({ listings }) {
  // 单个元素的ref处理函数
  const handleListingRef = (el) => {
    if (!el) return;
    const elementHeight = el.offsetHeight;
    const targetMaxHeight = elementHeight * 0.8; // 自定义计算逻辑
    el.style.maxHeight = `${targetMaxHeight}px`;
  };

  return (
    <div>
      {listings.map((listing, index) => (
        <div
          key={index}
          className={styles.listing}
          ref={handleListingRef}
        >
          listing {index}
        </div>
      ))}
    </div>
  );
}

注意事项 #

• 优先用listing的唯一标识（比如id）作为key，而非索引，避免React复用DOM元素导致ref绑定错误
• 获取尺寸的常用属性：offsetHeight（含边框、内边距）、clientHeight（仅内容+内边距），按需选择
• 若元素内容动态加载（如图片），需在内容加载完成后再计算尺寸，可监听load事件或用ResizeObserver监听尺寸变化

内容的提问来源于stack exchange，提问作者Louis Lecouturier