Question

我在看this code example时偶然发现了这种语法：

import React, { Component } from 'react';

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

我对:Component部分感到困惑。这看起来像是静态类型注释，其行为类似于普通注释，但这是Javascript，因此只能是对象，对吧？如果这是一个对象，是否表示该函数正在为其自身的参数分配一个默认的空Component对象？如果是这样，它如何从呼叫者那里接收它，例如（按照示例）：

<PrivateRoute path="/protected" component={Protected} />

Answer 1

这是ES6中名为对象destructuring的对象。下方

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

意味着无论将什么作为PrivateRoute属性传递给component，人们都可以使用Component变量来使用它。

Answer 2

我对：Component部分感到困惑。看起来像是静态类型注释

是的，看起来像，因为全局Component类的名称已被遮盖，因此，如果component键入时带有Typescript注释作为{{1 }}。但是在Typescript中，类型将跟随对象文字，因此它将是：

Component

因此，实际上第一个({ component: Component, ...rest }: { component: Component, rest: any })是解构变量的名称，而第二个Component输入Component作为组件。我会明确地将内部变量重命名为更有意义的名称，以防止产生阴影：

component

那等于：

 ({ component: ChildComponent, ...rest }) => (
   //...
   <ChildComponent {...props} />
)

如果这是一个对象，是否表示该函数正在为其自身的参数分配一个默认的空Component对象？

否，默认值将遵循props => { const ChildComponent = props.component, rest = props; return <ChildComponent {...rest}/> };，例如：

这是类型注释，对象还是其他？

2 个答案: