javascript - 如何解析 ' isActive ? "red": "blue"}/>'?

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);
}