这是什么意思……在React JSX中休息

Question

看看这个React Router Dom v4示例https://reacttraining.com/react-
router/web/example/auth-workflow
我看到 PrivateRoute 组件像这样破坏了一个休息道具

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

我想确定这{ component: Component, ...rest }意味着：

从中props获取Component属性，然后再提供所有其他属性，然后重命名props为，rest这样就可以避免传递给Route
render函数的属性的命名问题

我对吗？

Answer 1

抱歉，我意识到我的第一个答案（虽然希望仍能提供有用的/附加的上下文）不能回答您的问题。让我再试一遍。

你问：

我想确定这{ component: Component, ...rest }意味着：

从中props获取Component道具，然后将所有其他道具props提供给您，然后重命名props为，rest这样您就可以避免props传递给Route
render函数的命名问题

您的解释不太正确。但是根据您的想法，听起来您至少知道以下事实：某种情况下对象分解（请参阅第二个答案和评论以获取更多说明）。

为了给出准确的解释，让我们将{ component: Component, ...rest }表达式分解为两个单独的操作：

1. 操作1： 查找component上定义的属性props（ 注意 ：小写 Ç omponent），并将其分配给状态我们称之为新的位置Component（ 注 ：资本 Ç omponent）。
2. 操作2： 然后，获取在对象上定义的所有 剩余 属性，props并将它们收集在称为的参数中rest。

重要的是您不会重命名props为rest。（并且也与尝试“避免props传递给Route render函数的命名问题”有关。）

rest === props;
// => false

您只需将对象上定义的属性 的其余部分 （因此将其命名为该名称）提取props为一个称为的新参数rest。

用法示例

这是一个例子。假设我们有一个myObj定义如下的对象：

const myObj = {
  name: 'John Doe',
  age: 35,
  sex: 'M',
  dob: new Date(1990, 1, 1)
};

对于此示例，可能会想像一下props具有相同的结构（ 即 属性和值），可能会有所帮助myObj。现在，让我们编写以下任务。

const { name: Username, ...rest } = myObj

上面的 声明 相当于两个变量（或者，我想是常量）的 声明 和 赋值 。该语句可以认为是：

接受name定义的属性，myObj并将其值分配给我们称为的新变量Username。然后，取中定义的任何其他属性myObj（ 即
，age，sex和dob），并收集他们到分配给变量我们名称的新对象rest。

登录Username并rest到console会证实这一点。我们有以下内容：

console.log(Username);
// => John Doe



console.log(rest);
// => { age: 35, sex: 'M', dob: Mon Jan 01 1990 00:00:00 GMT-0800 (PST) }

边注

您可能想知道：

为什么要取消component财产而只Component用大写字母“ C” 重命名呢？

是的，这似乎很琐碎。而且，尽管这是标准的React惯例，但有理由将Facebook框架上的所有文档都照这样编写。也就是说，大写使用JSX渲染的自定义组件本身不是一种实践，而是一种必要。React，或更恰当地说，JSX是区分大小写的。插入的没有大写首字母的自定义组件不会呈现给DOM。这就是React定义自己以识别自定义组件的方式。因此，如果该示例没有另外重命名从中component拉出的属性，则该表达式将无法正确呈现。props``Component``<component {...props} />