如何在ReactJS中获取子元素尺寸以居中内容动态变化的绝对定位DIV

修复后可直接运行代码 #

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

function Center(props) {
  const divRef = useRef(null);
  const [width, setWidth] = useState(0);
  const offset = -width / 2;

  // 依赖项添加props.message，每次文本变更时重新计算宽度
  useEffect(() => {
    if (divRef.current) {
      // 修复原代码笔误：original改为current
      setWidth(divRef.current.offsetWidth);
    }
  }, [props.message]);

  return (
    <div
      ref={divRef}
      style={{
        position: 'absolute',
        left: `${props.x + offset}px`,
      }}
    >
      {props.message}
    </div>
  );
}

关键修改说明 #

• 修复原代码笔误：将divRef.original.offsetWidth改为divRef.current.offsetWidth，解决原代码可能首次渲染也无法正确获取宽度的问题
• useEffect依赖项数组添加props.message：只要传入的文本内容变更，就会在DOM更新完成后重新读取元素尺寸、更新宽度，不需要监听窗口resize事件
• 补充position: absolute样式和像素单位，避免样式异常
• 给width添加初始值0，避免首次渲染时offset为NaN导致样式错误

通用升级方案（适配复杂业务场景） #

如果存在除props.message之外的其他因素会改变div宽度（比如内部状态修改内容、字体异步加载完成、子元素动态变更等），可以用ResizeObserver监听元素自身的尺寸变化，无需手动维护所有依赖项：

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

function Center(props) {
  const divRef = useRef(null);
  const [width, setWidth] = useState(0);
  const offset = -width / 2;

  useEffect(() => {
    const element = divRef.current;
    if (!element) return;

    const resizeObserver = new ResizeObserver(entries => {
      setWidth(entries[0].contentRect.width);
    });
    resizeObserver.observe(element);

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

  return (
    <div
      ref={divRef}
      style={{
        position: 'absolute',
        left: `${props.x + offset}px`,
      }}
    >
      {props.message}
    </div>
  );
}

该方案可以感知所有原因导致的元素尺寸变更，不需要监听window.resize事件，完全符合你的限制要求。

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