如何将NavLink的isActive属性直接传递给其子组件？

你遇到的渲染错误，根源是在NavLink的style回调里调用setActive——这个回调的作用是返回样式对象，而你在这里触发状态更新，会导致组件反复重渲染，形成循环。

完全不需要额外维护active状态，NavLink支持通过children函数直接获取isActive状态，直接传给子组件就行：

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}>
        {/* 用children函数接收isActive参数 */}
        {({ isActive }) => (
          <>
            <Title>{title}</Title>
            <SelectedContainerIcon active={isActive}>
              <Icon />
            </SelectedContainerIcon>
          </>
        )}
      </NavLink>
    </StyledNavLink>
  );
}

另外，你已经通过useMatch拿到了match值，如果match和isActive是等价的（通常情况是一致的），甚至可以直接把match传给SelectedContainerIcon，省掉NavLink内部的状态判断：

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}>
        <Title>{title}</Title>
        <SelectedContainerIcon active={!!match}>
          <Icon />
        </SelectedContainerIcon>
      </NavLink>
    </StyledNavLink>
  );
}

这两种写法都能避免状态更新导致的循环渲染问题，直接把激活状态传给子组件。

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