React中无需case/switch 从路由Hash提取Ref名传给scrollIntoView的实现方案

核心实现逻辑 #

• 用Ref映射字典替代传统switch条件分支，将锚点hash标识和对应DOM引用做键值对绑定
• 从props.location.hash中提取去掉开头#的纯字符串作为查找键，直接在字典中匹配对应的DOM节点
• 命中节点后直接调用scrollIntoView方法触发平滑滚动，全程不需要写任何条件判断分支

常见踩坑说明 #

• 之前直接用截取后的hash字符串当Ref名调用失败的原因：useRef创建的实例是组件作用域内的普通对象，无法通过字符串形式直接索引取值，直接调用会返回undefined
• 手动构建可字符串索引的Ref映射容器后，就能绕开作用域限制，通过hash值精准拿到对应DOM节点

完整可运行代码示例 #

import { useEffect, useRef } from 'react';

function PageComponent(props) {
  const location = props.location;
  // 初始化一个统一的Ref映射容器，存储所有锚点对应的DOM节点
  const anchorRefMap = useRef({});

  useEffect(() => {
    // 提取hash中的目标锚点标识
    const targetKey = location.hash?.slice(1);
    // 没有匹配的目标时直接退出逻辑
    if (!targetKey) return;

    // 直接通过键查找对应DOM，完全不需要switch判断
    const targetDom = anchorRefMap.current[targetKey];
    targetDom?.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }, [location.hash]);

  return (
    <div className="page-wrapper">
      {/* 每个锚点块绑定Ref时，直接写入映射字典 */}
      <section ref={(dom) => anchorRefMap.current['home'] = dom}>
        首页模块
      </section>
      <section ref={(dom) => anchorRefMap.current['about'] = dom}>
        关于我们模块
      </section>
      <section ref={(dom) => anchorRefMap.current['contact'] = dom}>
        联系我们模块
      </section>
    </div>
  )
}

方案优势 #

• 完全消除冗余的case/switch分支代码，新增锚点模块时只需要给对应DOM元素绑定Ref到映射字典，不需要改动滚动逻辑的核心代码
• 锚点匹配逻辑和业务模块完全解耦，没有硬编码的条件判断，维护成本极低
• 兼容现有路由跳转的hash规则，不需要调整已有的跳转传参格式

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