如何获取JSX Element的总宽度 解决ref为空无法获取渲染尺寸问题

JSX只是React用来描述UI结构的虚拟节点对象，没有真正渲染到DOM树时不会生成对应的实体DOM节点，这也是你直接读取ref返回null的核心原因。可以根据你的使用场景选择以下两种实现方式：

场景1：元素需要正常渲染到当前页面 #

不要使用临时挂载的方案，直接通过ref配合生命周期钩子获取宽度即可：

1. 首先确保你的CustomButton函数组件使用forwardRef包裹，否则外部传入的ref无法绑定到真实DOM节点上
2. 使用useLayoutEffect在DOM渲染完成后同步读取宽度，比普通useEffect触发时机更早，能避免布局闪烁问题

代码示例：

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

// 对CustomButton做forwardRef处理
const CustomButton = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
  (props, ref) => {
    return <button ref={ref} {...props}>自定义按钮</button>;
  }
);

function YourComponent() {
  const buttonRef = useRef<HTMLButtonElement>(null);

  useLayoutEffect(() => {
    if (!buttonRef.current) return;
    // 读取渲染后的宽度
    const renderWidth = window.getComputedStyle(buttonRef.current).width;
    // 后续逻辑
    console.log('按钮实际宽度：', renderWidth);
  }, []);

  return <CustomButton ref={buttonRef} />;
}

场景2：元素不需要渲染到页面，仅临时计算宽度 #

如果只是需要离线计算元素的渲染宽度，可以创建临时容器挂载后读取，用完及时清理即可：

// React 17及更早版本
import { render } from 'react-dom';
import { CustomButton } from './你的组件路径';

function calcCustomButtonWidth() {
  // 创建隐藏的临时容器，避免影响现有页面布局
  const tempContainer = document.createElement('div');
  tempContainer.style.cssText = `
    position: absolute;
    left: -9999px;
    top: -9999px;
    visibility: hidden;
    pointer-events: none;
  `;
  document.body.appendChild(tempContainer);

  // 将JSX渲染到临时容器
  render(<CustomButton />, tempContainer, () => {
    const buttonDom = tempContainer.firstChild as HTMLElement;
    const calcWidth = window.getComputedStyle(buttonDom).width;
    // 后续逻辑
    console.log('计算得到的按钮宽度：', calcWidth);
    
    // 清理节点避免内存泄漏
    document.body.removeChild(tempContainer);
  });
}

如果使用React 18，将render逻辑替换为createRoot写法即可：

import { createRoot } from 'react-dom/client';

// ... 其他逻辑不变
const root = createRoot(tempContainer);
root.render(<CustomButton />);
// 等待渲染完成后读取宽度
setTimeout(() => {
  const buttonDom = tempContainer.firstChild as HTMLElement;
  const calcWidth = window.getComputedStyle(buttonDom).width;
  document.body.removeChild(tempContainer);
}, 0);

注意事项 #

• 临时计算宽度时要保证临时容器的全局样式环境（比如主题、全局CSS类、字体配置）和实际渲染场景完全一致，否则计算结果会有偏差
• 临时容器使用完成后必须从DOM树移除，避免产生内存泄漏

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