Question

我正在关注本教程https://serverless-stack.com/并且正在https://serverless-stack.com/chapters/create-a-route-that-redirects.html

这引入了一个AuthenticatedRoute来检查名为isAuthenticated的道具的值，以决定是否天气呈现组件或将用户重定向到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（无状态）组件 - 一个函数。

使用props作为第一个参数和此行调用该组件 ({ component: C, props: cProps, ...rest }) destructures道具，并将其中一些分配给变量。 component: C从props对象中提取component属性，并将其分配给变量C。
...rest中的({ component: C, props: cProps, ...rest })是ECMAScript's Object Rest/Spread Properties proposal的一部分，您需要babel Object rest spread transform才能在当前浏览器中使用它。它从未分配给变量的所有对象属性（其余）创建一个新对象。
<C {...props} {...cProps} />是react JSX spread attributes，它将所有对象（props和cProps）属性转换为组件属性（如写入key = value）。 cProps中的道具会覆盖props的属性，因为它们会显示在MyTestModule之后。

Answer 2

组件：C - 在ES6中，如果未传递参数，则可以进行默认初始化。此组件将默认为C.

... rest-使用ES6，您可以传播数据结构的元素。其余的可以有渲染函数的路径路径。

- cprops和props的每个元素作为属性传递给C组件。 cProps中的道具将覆盖道具后面出现的道具属性。

Answer 3

在这种情况下，Authenticated Route被称为高阶组件。如果用户经过身份验证或Authenticated Route组件，Route会对您的component: C组件进行包装并有条件地返回Redirect。

component它是Authenticated Route的简单道具，但由于其反应成分必须大写，因此将其重命名为C。
props: cProps它是您想要接收到组件的道具
props它需要应用于组件的Route渲染道具，渲染方法应该返回
...rest它包含任何其他道具的对象，基本上是指Route
关于{... someData}，您已在上面的评论

然后你可以简单地包装使用<AuthenticatedRoute />并根据上面提到的信息传递你需要的道具

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

3 个答案: