javascript - 在 React 中将组件定义为对象

Question

我正在学习教程 ( Serverless-Stack )，但我对以下代码片段有点困惑:

import React from "react";
import { Route } from "react-router-dom";

export default ({ component: C, props: cProps, ...rest }) =>
  <Route {...rest} render={props => <C {...props} {...cProps} />} />;

令人困惑的部分是 props 是如何定义的。我看到的大多数例子都是 props作为单个参数，例如 export default (props) => ... ，但是这被定义为一个对象。

我的理解是，在 JavaScript 中，常规对象是通过调用对象的键来使用的，如下所示:

let bar = 'baz';
let myObj = {foo: bar};
console.log(myObj['foo']);

我的问题是:教程中的代码片段如何通过值而不是键检索 Prop ？不应该是<component ...>而不是<C ...> ？

是否有一个用于定义此类 Prop 的技术名称，我可以搜索它以了解有关其工作原理的更多信息？

Answer 1

这不是值(value)观。解构对象时，您可以使用该语法重命名变量。

({ key0: renamedKey0 }) => ...

您可以在MDN web docs中阅读更多相关信息。在“分配新变量名称”部分中。