React中<Link/>导航时触发函数及避免MenuItem重复onClick代码的方法

解决方案 #

这里提供两种实现思路，都可以完全去掉重复的onClick绑定代码，同时满足路由跳转时自动关闭菜单的需求：

方案1：封装通用自定义菜单项组件

把关闭菜单的逻辑、Link路由逻辑都封装到自定义组件内，后续新增菜单项只需要传文本和路由地址即可：

// 可以直接在NavBar.js内定义这个组件，也可以抽成公共组件
const NavMenuItem = ({ label, to }) => {
  const dispatch = useDispatch();
  const closeMainMenu = () => dispatch(closeMenu());
  return (
    <MenuItem onClick={closeMainMenu} component={Link} to={to}>
      {label}
    </MenuItem>
  )
}

// 原NavBar组件内的Menu部分就可以简化为：
<Menu iconShape="square">
  <NavMenuItem label="Dashboard" to="/" />
  <NavMenuItem label="General Information" to="/general-information" />
  <NavMenuItem label="blog" to="/blogs" />
  <NavMenuItem label="Users" to="/users" />
</Menu>

注：这里直接用react-pro-sidebar MenuItem原生支持的component属性指定为Link，无需嵌套Link标签，写法更简洁

方案2：配置化循环渲染

如果菜单项后续会频繁新增/调整，可以直接把菜单配置抽成数组，循环渲染完全避免重复代码：

export default function NavBar(props) {
  const dispatch = useDispatch();
  const showMenu = useSelector((state) => state.toggleMenu);

  const closeMainMenu = () => {
    dispatch(closeMenu())
  }

  // 菜单配置数组，新增菜单项只需要往这个数组加对象即可
  const menuList = [
    { label: 'Dashboard', path: '/' },
    { label: 'General Information', path: '/general-information' },
    { label: 'blog', path: '/blogs' },
    { label: 'Users', path: '/users' },
  ]

  return (
    <ProSidebar
      toggled={showMenu}
      onToggle={closeMainMenu}
      breakPoint="md"
    >
      <SidebarHeader>
        <span>Proside Bar</span>
      </SidebarHeader>
      <SidebarContent>
        <Menu iconShape="square">
          {/* 循环渲染所有菜单项 */}
          {menuList.map(item => (
            <MenuItem 
              key={item.path} 
              onClick={closeMainMenu}
              component={Link}
              to={item.path}
            >
              {item.label}
            </MenuItem>
          ))}
        </Menu>
      </SidebarContent>
    </ProSidebar>
  );
}

两种方案都满足需求：点击菜单项路由跳转的同时自动触发关闭菜单的逻辑，没有任何重复的绑定代码，后续维护也更简单。

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