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 ...>吗？

是否有一个技术名称来定义这样的道具，我可以搜索以了解它的工作原理？

Answer 1

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

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

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

Answer 2

只是尝试分解您可视化发生的事情的步骤

以下代码

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

从更长的表格翻译如下

export default (parameterObject) => {
  let C = parameterObject.component;
  let cProps = parameterObject.cProps;
  //...
};

然后将其缩短为以下版本

export default ({component, cProps}) => {
  let C = component;
  let cProps = cProps;
  //...
};

最终转换为您发布的代码

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

在React中将组件定义为对象

2 个答案: