如何解析<NavLink className={({ isActive }) => isActive？“红色”：“蓝色”} />'？

Question

我想我理解为什么将作为参数传递给箭头函数的 isActive 的第一个实例封装在花括号中，即{ isActive }，而第二个isActive不是封装在花括号中，而是希望确保正确理解。

第一个封装在花括号中的" isActive“({ isActive })是对象析构的一个例子吗？(如果不是，JS中的箭头函数不期望接收变量的名称，但{ isActive }计算值不为true还是false?)

我说得对吗?这是一个对象分解的例子吗？

Answer 1

你的理解是对的。react-router v6已经稍微改变了NavLink API。您需要提供包装在对象中的isActive，而不是在NavLink v5中。

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