在对象解构中使用冒号

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

有两种基本方法可以使用:in 解构：

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