javascript - 这个 React 组件中发生了什么 ES6 魔法？

Question

我正在学习本教程 https://serverless-stack.com/我在 https://serverless-stack.com/chapters/create-a-route-that-redirects.html

这引入了一个 AuthenticatedRoute它检查名为 isAuthenticated 的 Prop 的值(value)决定天气或不渲染组件或将用户重定向到 login

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

export default ({ component: C, props: cProps, ...rest }) =>
  <Route
    {...rest}
    render={props =>
      cProps.isAuthenticated
        ? <C {...props} {...cProps} />
        : <Redirect
            to={`/login?redirect=${props.location.pathname}${props.location
              .search}`}
          />}
  />;

我知道它取得了什么成就，但我不确定它是如何做到的。

有人可以向我解释以下位是怎么回事吗？

• component: C
• ...rest
• <C {...props} {...cProps} />

Answer 1

AuthenticatedRoute是 Functional (无状态)组件 - 一个函数。

1. 组件以 props 作为第一个参数被调用，这一行 ({ component: C, props: cProps, ...rest }) destructures Prop ，并将其中一些分配给变量。 component: C提取 component props 对象的属性，并将其分配给变量 C .

2. ...rest在 ({ component: C, props: cProps, ...rest })是 ECMAScript's Object Rest/Spread Properties proposal 的一部分, 你需要 babel 的 Object rest spread transform让它在当前的浏览器中工作。它根据所有未分配给变量(其余)的对象属性创建一个新对象。

3. <C {...props} {...cProps} />是 react 的 JSX spread attributes ，并将所有对象( props 和 cProps )属性转换为组件属性(如编写键=值)。 cProps 中的 Prop 将覆盖 props 的属性因为他们出现在他们之后。