在对象解构中使用冒号

Question

我仍然不熟悉ES6的所有魔力。我在一篇在线文章中看到了这段代码，我不确定PrivateRoute是如何解构输入道具的。 component: Component在这种情况下做了什么？

const PrivateRoute = ({ component: Component, ...rest }) => (
  // Code here
)

我知道我可以做这样的事情来构建一个对象

obj = {firstName: 'John', lastName: 'Doe'};
{first, last} = obj;

并拥有first = 'John'，last = 'Doe';但是，我对示例代码中引入冒号感到困惑。

以下是完整文章的链接：https://tylermcginnis.com/react-router-protected-routes-authentication/

Answer 1

在解构中使用:有两种基本方法：

1. 解构子对象
2. 别名变量

如果:的右侧是一个对象或数组，那么您正在对一个子对象进行解构。如果右侧是标识符，那么您将对:

左侧的键进行别名处理

解构子对象

const { component: { example } } = opts

// equivalent to
const example = opts.component.example

别名变量

const { component: Component } = opts

// equivalent to:
const Component = opts.component

两者合并

const { component: { example: Component } } = opts

// equivalent to
const Component = opts.component.example

Answer 2

对于通过解构获得的属性使用不同的名称。

let obj = {
  a: 'thing A',
  b: 'thing B'
}

let { a: thing } = obj
console.log(thing) // outputs: "thing A"

Here are the docs for this exact behavior

Answer 3

上面已经发布了它，因为它在那里阅读文档。您要查找的部分是：“分配给新变量名称”。

特别是在上面的示例中，“component”被分配给以大写字母C开头的新变量。