React NavLink 根据 isActive 改变子元素答案

【问题标题】：React NavLink change sub element according to isActiveReact NavLink 根据 isActive 改变子元素
【发布时间】：2021-12-31 07:26:54
【问题描述】：

我有以下链接：

<NavLink to={x.url} className={(x) = x.isActive ? 'active' : 'not-active' } >
    <img src={`icon-default.svg`} /> // change from default.svg to active.svg       
    Link Text
</NavLink>

我的图标在 HTML 而不是 CSS，我想根据 isActive 调用不同的 img，是否可以在子元素（img 标记）上执行此操作？

react-router-dom": "^6.0.2"

谢谢

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

在react-router-dom v6 中，NavLink 的 children 属性也采用了一个传递 isActive 属性的函数。该函数必须返回一个ReactNode（即 JSX）。

NavLink v6

declare function NavLink(
  props: NavLinkProps
): React.ReactElement;

interface NavLinkProps
  extends Omit<
    LinkProps,
    "className" | "style" | "children"
  > {
  caseSensitive?: boolean;
  children?:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);
  className?:
    | string
    | ((props: { isActive: boolean }) => string);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: {
        isActive: boolean;
      }) => React.CSSProperties);
}

在children prop 上使用渲染函数来渲染链接内容并有条件地设置图像源属性。

<NavLink
  to={x.url}
  className={({ isActive }) = isActive ? 'active' : 'not-active'}
  children={({ isActive }) => {
    const file = isActive ? "active" : "default";
    return (
      <>
        <img src={`icon-${file}.svg`} />
        {x.text}
      </>
    );
  }}
/>

【讨论】：

谢谢，看看这里：stackblitz.com/edit/react-router-v6-sample-byxy8d img 没有渲染...
@SexyMF 我没有 SVG 可以方便地进行测试，但猫图片通常是一个很好的替代品。上面的isActive 逻辑似乎可以像我在这个codesandbox 中所期望的那样运行。您的 stackblitz 似乎在 /public/assets/top-links/ 目录中没有可用/可访问的 SVG 图像。
谢谢，我需要 6.2.1 才能让它工作。