Использование двоеточий при деструктурировании объектов

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

Это будет использовать другое имя для свойства, полученного путем деструктурирования.

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

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

Вот документы для этого точного поведения

Answer 2

Существует два основных способа использования : в деструктурировании:

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 3

Это уже было опубликовано выше, чтобы прочитать документы, как там.Вы ищете следующий раздел: «Присвоение новым именам переменных».

В частности, в приведенном выше примере «компонент» присваивается новой переменной, начинающейся с заглавной буквы C.