React使用useRef操作DOM设置Tooltip值首次不显示如何解决

问题根因 #

你当前写法首次渲染拿不到值、后续更新不生效，核心是三个问题：

1. 组件首次渲染执行到JSX的title={currentPrice.current.value}时，真实DOM还没挂载完成，currentPrice.current此时是null，自然读不到任何值
2. useRef的内容修改不会触发组件重渲染，就算后续你给currentPrice.current.value赋了新值，Tooltip组件也不会收到更新通知，永远保留第一次渲染读到的初始值
3. Grid组件最终渲染的是div元素，本身没有原生value属性，你手动给DOM节点追加的自定义value属性不属于React的响应式监听范围

正确实现（完全不用state，纯useRef+DOM操作） #

核心思路：不要指望靠ref值变化驱动React重渲染，所有更新逻辑直接操作DOM完成，ref只做值的存储。

1. 调整ref声明，单独用一个ref存储tooltip文本，不要把值挂在DOM节点的非标准属性上

// 保留原来的价格标记节点ref
const currentPrice = useRef(null);
// 单独存tooltip显示的价格文本，给好初始默认值
const tooltipText = useRef('0');

2. 修改setRange逻辑，计算完价格后直接手动更新DOM的title属性，同时同步更新ref里存的值

const setRange = (instrument) => {
  // 原有价格位置计算逻辑完全保留
  const currentPricePosition =
    rangeInfo.HighestTradePrice > rangeInfo.UpperStaticThreshold
      ? ((rangeInfo.LastTradePrice - rangeInfo.LowerStaticThreshold) /
          (rangeInfo.HighestTradePrice - rangeInfo.LowerStaticThreshold)) *
        100
      : ((rangeInfo.LastTradePrice - rangeInfo.LowerStaticThreshold) /
          (rangeInfo.UpperStaticThreshold - rangeInfo.LowerStaticThreshold)) *
        100;

  // 原有样式修改逻辑保留
  currentPrice.current.style.left = `${currentPricePosition}%`;
  currentPrice.current.children[0].style.fill =
    rangeInfo.LastTradePrice > rangeInfo.PreviousDayPrice
      ? `${theme.palette.color.green}`
      : `${theme.palette.color.red}`;

  // 更新tooltip逻辑：格式化价格后同步到ref和DOM原生title属性
  const formattedPrice = comma(rangeInfo.LastTradePrice);
  tooltipText.current = formattedPrice;
  // 直接给Grid节点设置原生title属性，无论是原生hover提示还是Tooltip组件都能读取
  currentPrice.current.setAttribute('title', formattedPrice);
}

3. 修改JSX部分，移除state相关逻辑，点击事件直接读ref里存的值，给节点加默认title兜底首次渲染

return (
  <>
    <Tooltip
      placement="top"
      title={tooltipText.current}
    >
      <Grid
        item
        className={classes.currentPrice}
        ref={currentPrice}
        title="0" {/* 首次渲染DOM还没更新时的兜底值 */}
        onClick={() => clickHandler(tooltipText.current)}
      >
        <LocationIcon
          className={clsx(
            classes.currentPriceIcon,
            device.isMobile && classes.currentPriceIconMobile
          )}
        ></LocationIcon>
      </Grid>
    </Tooltip>
  </>
)

注意事项 #

• 如果你用的是MUI这类自定义Tooltip组件，手动设置子元素的原生title后组件会自动同步读取，不需要额外传受控title属性；如果遇到Tooltip不更新的情况，可以再加一个ref绑定Tooltip实例，在setRange里手动调用组件的更新方法即可，绝大多数场景不需要这一步
• 不要在JSX的动态属性里依赖会频繁更新的ref值，ref变化不会触发重渲染，这类更新直接走DOM操作更符合你不用state的需求
• 原来的useEffect记得补全判断，等DOM挂载完成、currentPrice.current不为null时再执行setRange，避免空指针报错

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