如何基于React-Router-Dom NavLink的isActive状态修改内部SVG的fill属性？

方法一：通过NavLink的children函数动态传递isActive状态 #

这种方法需要调整导航配置数组的结构，将SVG组件本身（而非实例）存入数组，之后利用NavLink的children函数特性，把激活状态传递给SVG组件。

1. 修改导航配置数组：

// 将原来的icon实例改为组件引用
const Nav = [
  { path: '/', Icon: NavIcon.Home },
  { path: '/service', Icon: NavIcon.Service }
];

2. 渲染NavLink时传递isActive：

function someFunc() {
  return Nav.map(({ path, Icon }) => (
    <NavLink key={path} to={path}>
      {/* NavLink的children可以是接收{isActive}的函数 */}
      {({ isActive }) => <Icon isActive={isActive} />}
    </NavLink>
  ));
}

3. SVG组件保持你已定义的接口即可：

interface Props {
  isActive: boolean;
}

const Home = ({ isActive }: Props) => {
  return (
    <svg fill={isActive ? 'color1' : 'color2'}>
      {/* SVG内部元素 */}
    </svg>
  );
};

方法二：不修改数组结构，将icon改为接收isActive的函数 #

如果不想调整导航数组的结构，可以把每个icon定义为一个函数，接收isActive参数后返回SVG实例：

1. 调整导航数组：

const Nav = [
  { 
    path: '/', 
    icon: (isActive: boolean) => <NavIcon.Home isActive={isActive} /> 
  },
  { 
    path: '/service', 
    icon: (isActive: boolean) => <NavIcon.Service isActive={isActive} /> 
  }
];

2. 渲染时调用icon函数并传入isActive：

function someFunc() {
  return Nav.map(({ path, icon }) => (
    <NavLink key={path} to={path}>
      {({ isActive }) => icon(isActive)}
    </NavLink>
  ));
}

方法三：纯CSS实现（最简单，无需组件传参） #

如果仅需修改SVG的fill颜色，完全可以通过CSS选择器实现，不需要传递状态：

1. 给NavLink设置激活类：

function someFunc() {
  return Nav.map(({ path, icon }) => (
    <NavLink 
      key={path} 
      to={path}
      className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'}
    >
      {icon}
    </NavLink>
  ));
}

2. 编写CSS样式：

/* 默认状态下的SVG颜色 */
.nav-item svg {
  fill: color2;
}

/* 激活状态下的SVG颜色 */
.nav-item.active svg {
  fill: color1;
}

这种方式不需要修改SVG组件的代码，适合仅需样式变化的场景。

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