小编典典

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

reactjs

看看这个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函数的属性的命名问题

我对吗?


阅读 289

收藏
2020-07-22

共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

重要的是您不会重命名propsrest。(并且也与尝试“避免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
agesexdob),并收集他们到分配给变量我们名称的新对象rest

登录Usernamerestconsole会证实这一点。我们有以下内容:

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} />

2020-07-22