Question

有人可以帮助我了解破坏的原理吗？

假设我们有一个组件，其 component为props

即

const AuthenticatedRoutes = (props)=> {

  console.log(props)

console.log(props) 给出以下结果

{path: "/auth", component: ƒ, prop: {…}, location: {…}, computedMatch: {…}}
component: ƒ Connect(props)
computedMatch: {path: "/auth", url: "/auth", isExact: true, params: {…}}
location: {pathname: "/auth", search: "", hash: "", state: undefined}
path: "/auth"
prop: {isAuthenticated: false}

现在，如果我解构并像上面这样写上面的代码

const AuthenticatedRoutes = ({component: Component, ...props})=> {
  console.log(component)

抛出错误，提示未定义组件，但如果我

 console.log(Component)

它会记录道具中的component。

基于我对Javascript的模糊理解，我认为我们通过将值存储在右侧并在左侧分配值来将值存储/分配给javascript对象

喜欢

name: Anny

在对象内部的

将为属性名称分配值anny。

有人可以解释一下我为什么得到console.log(Component)而不是console.log(component)的结果

Answer 1

函数定义中的语法{component: Component,表示，“我想要对象参数的“ component”属性值，我希望将其称为 “ Component”在功能上。”换句话说，它从默认名称重命名，即源属性名称。

如果你写过

const AuthenticatedRoutes = ({component, ...props})=> {
  console.log(component)

然后它会工作。函数中的参数名称将与传入对象中的属性名称相同。

我同意这有点令人困惑，因为在对象初始化程序中，:将属性名称（左侧）与右侧的值表达式分开。特别是，值表达式与为任何名称创建名称无关。但是，在解构语法中，:的用法不同。键盘上只有这么多的标点符号。

破坏传递给子函数的属性

1 个答案: