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其作为单个参数，例如export default (props) => ...，但是这被定义为一个对象。

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

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

我的问题是：教程中的片段如何通过值而不是键检索道具？不应该<component ...>代替<C ...>吗？

是否有定义这样的道具的技术名称，我可以搜索以了解有关它如何工作的更多信息？

标签： javascriptreactjs

Answer 1

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

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

您可以在“分配给新变量名”部分的MDN Web 文档中阅读有关它的更多信息。