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

Question

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

{}一个括号
括号后 3 点（展开）
() 3 点传播后

我希望我能清楚地描述我想知道的事情。

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

Answer 1

为了简单地解释展开运算符，它展开了组件内的所有属性。

比方说，你传递了一个属性 title = "Side Link", 这会自动分配到 Side Nave link 组件中，因此您无需专门添加此道具来检索值。

如果您从父级传递了多个 props，并且您不想手动将它们全部添加到 Side Nav Link 组件中，您可以使用展开运算符，它会将所有这些 props 展开到组件。

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

Answer 2

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

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

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

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

Spread operator in react component props

reactjs

react-props

spread-syntax