如何將“isActive”道具從 NavLink 傳遞給它的孩子？

Question

function NavigationLink({ to, title, exactPath, Icon }) {
  const resolved = useResolvedPath(to);
  const match = useMatch({
    path: resolved.pathname,
    end: exactPath,
  });
  const [active, setActive] = useState(false);

  return (
    <StyledNavLink linkSelected={match}>
      <NavLink
        to={to}
        style={({ isActive }) =>
          isActive ? setActive(true) : setActive(false)
        }
      >
        <Title>{title}</Title>
        <SelectedContainerIcon active={active}>
          <Icon />
        </SelectedContainerIcon>
      </NavLink>
    </StyledNavLink>
  );
}

現在我正在使用它，使用“isActive”來更改 state，然后將其傳遞給子組件（以更改圖標的背景顏色），但它給了我一個渲染錯誤（盡管實際上運行良好）。 有沒有辦法將“isActive”直接傳遞給孩子？

Answer 1

除了為className和style屬性獲取 function 回調之外， NavLink還將渲染 function 作為children屬性。

不要使用className或style屬性來發出副作用，例如將 state 更新排隊。

導航鏈接

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 | undefined); end?: boolean; style?: | React.CSSProperties | ((props: { isActive: boolean; }) => React.CSSProperties); }

你的代碼：

function NavigationLink({ to, title, exactPath, Icon }) {
  const resolved = useResolvedPath(to);
  const match = useMatch({
    path: resolved.pathname,
    end: exactPath,
  });

  return (
    <StyledNavLink linkSelected={match}>
      <NavLink to={to}>
        {({ isActive }) => (
          <>
            <Title>{title}</Title>
            <SelectedContainerIcon active={isActive}>
              <Icon />
            </SelectedContainerIcon>
          </>
        )}
      </NavLink>
    </StyledNavLink>
  );
}

Answer 2

根據isActive屬性而不是style屬性動態呈現className ，並使用 CSS 后代選擇器更改活動 class 的子代。

<NavLink 
  to={to} 
  className={({ isActive }) => isActive ? "active" : "" }
>
  <Title>{title}</Title>
  <SelectedContainerIcon>
    <Icon />
  </SelectedContainerIcon>
</NavLink>

.active i {
  background-color: blue
}

使用此解決方案，可能不需要將active狀態保存到 state。 CSS 將為您執行邏輯。