React中动态获取元素宽度，路径变化时重计算的解决办法

方案1：通过路由事件监听触发更新（无需依赖pathname） #

如果无法直接将window.location.pathname作为依赖项，可以监听浏览器原生的路由变化事件，覆盖前进后退、哈希路由切换等场景，触发宽度重新计算：

import { useRef, useLayoutEffect } from 'react';

// ...

const spanRef = useRef(null);

useLayoutEffect(() => {
  const updateMargin = () => {
    if (!spanRef.current) return;
    const currentWidth = spanRef.current.offsetWidth;
    spanRef.current.style.marginRight = `${currentWidth / 2}px`;
  };

  // 初始加载时计算一次
  updateMargin();

  // 监听路由相关事件
  window.addEventListener('popstate', updateMargin);
  window.addEventListener('hashchange', updateMargin);

  // 组件卸载时清理监听
  return () => {
    window.removeEventListener('popstate', updateMargin);
    window.removeEventListener('hashchange', updateMargin);
  };
}, []); // 无需依赖pathname，通过事件触发更新

<span className='big' id='meria' ref={spanRef}>{/* 动态填充的文本 */}</span>

方案2：利用React Router的useLocation（适用于React Router项目） #

如果你的项目基于React Router，可以直接通过useLocation获取当前路径，将其作为依赖触发更新，这是更贴合路由场景的方案：

import { useLocation } from 'react-router-dom';
import { useRef, useLayoutEffect } from 'react';

// ...

const location = useLocation();
const spanRef = useRef(null);

useLayoutEffect(() => {
  if (!spanRef.current) return;
  const width = spanRef.current.offsetWidth;
  spanRef.current.style.marginRight = `${width / 2}px`;
}, [location.pathname]); // 路径变化时自动重新计算

<span className='big' id='meria' ref={spanRef}>{/* 动态填充的文本 */}</span>

方案3：简化逻辑，省略状态存储 #

你原代码里用useState存储宽度的步骤可以省略，直接在计算后设置元素样式，减少状态更新带来的额外渲染：

// 移除width相关的state，直接操作DOM样式
useLayoutEffect(() => {
  if (!ref.current) return;
  const width = ref.current.offsetWidth;
  ref.current.style.marginRight = `${width / 2}px`;
}, [/* 这里放触发更新的条件，比如上述的事件监听或location.pathname */]);

内容的提问来源于stack exchange，提问作者Y U K I M U R A