React中实现NavLink箭头键导航，求替代ReactDOM.findDOMNode的方案

核心思路 #

用React状态+路由API替代直接DOM操作，通过状态驱动导航项的激活与切换，完全遵循React的声明式编程范式：

• 借助路由钩子获取当前路径，计算激活项的索引
• 用状态管理当前激活索引，通过键盘事件更新索引
• 调用路由跳转方法切换页面，同步更新激活状态

具体实现代码 #

假设你的导航项是固定的，先定义导航数据：

import { NavLink, useLocation, useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';

const navItems = [
  { path: '/home', label: '首页' },
  { path: '/products', label: '产品' },
  { path: '/about', label: '关于我们' },
  // 可添加更多导航项
];

const Navbar = () => {
  const location = useLocation();
  const navigate = useNavigate();
  // 初始化当前激活项的索引
  const [activeIndex, setActiveIndex] = useState(() => 
    navItems.findIndex(item => item.path === location.pathname)
  );

  // 监听键盘左右箭头事件
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'ArrowLeft') {
        // 左箭头切换：处理边界，循环到最后一项
        const newIndex = activeIndex > 0 ? activeIndex - 1 : navItems.length - 1;
        setActiveIndex(newIndex);
        navigate(navItems[newIndex].path);
      } else if (e.key === 'ArrowRight') {
        // 右箭头切换：处理边界，循环到第一项
        const newIndex = activeIndex < navItems.length - 1 ? activeIndex + 1 : 0;
        setActiveIndex(newIndex);
        navigate(navItems[newIndex].path);
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [activeIndex, navigate]);

  // 路由手动变化时，同步更新激活索引
  useEffect(() => {
    setActiveIndex(navItems.findIndex(item => item.path === location.pathname));
  }, [location.pathname]);

  return (
    <nav>
      {navItems.map((item, index) => (
        <NavLink
          key={item.path}
          to={item.path}
          className={index === activeIndex ? 'active' : ''}
          aria-current={index === activeIndex ? 'page' : undefined}
        >
          {item.label}
        </NavLink>
      ))}
    </nav>
  );
};

export default Navbar;

方案优势 #

• 完全规避直接DOM操作，契合React状态驱动UI的设计理念
• 逻辑清晰，激活状态、导航切换全由状态和路由API控制
• 易维护扩展，新增导航项只需在navItems数组中添加即可
• 自动同步路由变化：用户手动切换路由时，激活索引会自动更新

对原代码的改进说明 #

原代码通过document.querySelector和click()模拟点击属于命令式DOM操作；新方案用状态更新+路由跳转实现，是声明式的实现方式，更符合React的设计原则。

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