在对象分解中使用冒号 [英] Using colons within object destructuring

问题描述

我仍然不熟悉ES6的所有魔力.我在在线文章中看到了此代码，但不确定PrivateRoute如何破坏输入道具. component: Component在这种情况下会做什么?

I'm still unfamiliar with all the magic of ES6. I saw this code in an online article and I'm not sure how PrivateRoute is destructuring the input props. what does component: Component do in this context?

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

我知道我可以做这样的事情来破坏物体

I understand that I can do something like this to destructure an object

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

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

and have first = 'John', last = 'Doe'; however, I got confused with the introduction of a colon in the example code.

这里是全文的链接: https://tylermcginnis.com/react-router-protected-routes-authentication/

推荐答案

在销毁过程中使用:的两种基本方法:

There are two basic ways to use the : in destructuring:

1. 破坏子对象
2. 给变量起别名

如果:的右侧是对象或数组，则您正在破坏子对象.如果右侧是标识符，则您将:

If the right hand side of the : is an object or array then you are destructuring a sub-object. If the right hand side is an identifier then you are aliasing the key on the left hand side of the :

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

这篇关于在对象分解中使用冒号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！