在对象赋值解构 JavaScript 中使用冒号

Question

使用 React.js 和 React Router：

import React, { Component } from 'react';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={} />
)

*{ component: Component, ...rest }*

...其余的是扩展语法的使用，但是

*component: Component*

是做什么的？

Answer 1

在 ES6 中，这会将值分配给一个新变量，在本例中名为

foo

let obj = {
  name: 'Some Name',
  age: '42',
  gender: 'coder'
};
let { name: foo, ...rest } = obj;
console.log({foo, rest}) // { foo: 'Some Name', rest: { age: 42, gender: 'coder' } }
//

在这种情况下，

name

将不会被定义

请参阅分配给新变量名称