reactjs - 反应组件道具中的传播运算符

Question

有人可以告诉我，它是如何传播 3 点的吗？我知道它想将 isActive(Boolean) 传递给组件 SideNavLink。如果它是真的那么它有那些道具。但是，我想知道代码的作用。

1. {} 一个括号
2. 括号后的 3 个点（展开）
3. () 3 点展开后

我希望我有一个伟大而清晰的描述我想知道的。

 <NavLink href={href}>
      {(isActive) => (
        <SideNavLink
          {...(isActive && { // this spread operator
            bg: "teal.200",
            rounded: "sm",
          })}
          {...props}
        />
      )}
    </NavLink>

标签： reactjsreact-propsspread-syntax

Answer 1

... 传播下一个可传播项目。在您的情况下，如果您将 isActive 评估为 true，您会发现，

...{bg: "teal.200", rounded: "sm",}

所以扩展运算符传播这个{bg: "teal.200", rounded: "sm",}对象并返回bg: "teal.200", rounded: "sm"，以便它们可以作为道具传递。