问题描述
我仍然不熟悉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:
- 破坏子对象
- 给变量起别名
如果:
的右侧是对象或数组,则您正在破坏子对象.如果右侧是标识符,则您将:
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
这篇关于在对象分解中使用冒号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!