这是什么意思...在 React JSX 中休息 [英] What does it mean ...rest in React JSX

问题描述

看看这个 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 ?(<组件{...props}/>) : (<重定向到={{路径名:'/登录'，状态:{来自:props.location}}}/>))}/>)

我想确定 { component: Component, ...rest } 的意思是:

<块引用>

从props，获取Component prop，然后是所有其他给你的prop，并将props重命名为rest，这样你就可以避免命名传递给 Route render 函数

的道具的问题

我说得对吗?

解决方案

抱歉，我意识到我的第一个答案(虽然希望仍然提供有用/额外的上下文)没有回答您的问题.让我再试一次.

你问:

<块引用>

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

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

你的解释不太正确.不过，根据您的想法，听起来您至少知道这里发生的事情相当于某种对象解构(有关更多说明，请参阅第二个答案和评论).

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

1. 操作 1: 找到 props 上定义的 component 属性(注意:小写component) 并将其分配到我们称为 Component 状态的新位置(注意:大写 Component).
2. 操作 2:然后，获取定义在 props 对象上的所有剩余属性，并将它们收集在名为 rest<的参数中/code>.

重要的一点是您没有将 props 重命名为 rest.(并且它也与尝试避免将 props 传递给 Route render 函数的命名问题"有关.)

rest === props;//=>错误的

您只是将 props 对象上定义的属性的其余(因此命名为该参数)转换为名为 的新参数休息.

---

示例用法

这是一个例子.假设我们有一个对象 `myObj` 定义如下:

const myObj = {name: 'John Doe',年龄:35，性别:'M',dob: 新日期(1990, 1, 1)};

对于此示例，将 props 视为具有与 myObj即、属性和值)可能会有所帮助代码>.现在，让我们编写以下作业.

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

上面的语句相当于两个变量(或者，我猜是常量)的声明和赋值.该语句可以被认为是:

<块引用>

获取在 myObj 上定义的属性 name 并将其值分配给一个新的我们称为 Username 的变量.然后，取任何其他属性在 myObj(i.e.、age、sex 和 dob)上定义并收集它们进入一个分配给我们命名为 rest 的变量的新对象.

将 Username 和 rest 登录到 console 将确认这一点.我们有以下几点:

console.log(Username);//=>约翰·多伊

console.log(rest);//=>{ 年龄:35，性别:'M'，出生日期:1990 年 1 月 1 日星期一 00:00:00 GMT-0800(太平洋标准时间)}

---

附注

你可能想知道:<块引用>

为什么要费心去拉取 component 属性只是将其重命名为Component 大写字母C"?

是的，这看起来很微不足道.而且，虽然这是标准的 React 实践，但所有 Facebook 的文档 都是有原因的.a> 在它的框架上是这样写的.也就是说，利用 JSX 呈现的自定义组件本身并不是一种实践，而是一种必要性.React，或者更准确地说，JSX 区分大小写.没有大写首字母插入的自定义组件不会呈现到 DOM.这就是 React 定义自己以识别自定义组件的方式.因此，如果示例没有另外重命名从 props 中提取的 component 属性为 Component，<component {...props}/> 表达式将无法正确呈现.

Looking at this React Router Dom v4 example https://reacttraining.com/react-router/web/example/auth-workflow I see that PrivateRoute component destructures a rest prop like this

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

I want to be certain that { component: Component, ...rest } means:

From props, get the Component prop and then all other props given to you, and rename props to rest so you can avoid naming issues with the props passed to the Route render function

Am I right?

解决方案

Sorry, I realized my first answer (while hopefully still providing useful/additional context) doesn't answer your question. Let me try again.

You ask:

I want to be certain that { component: Component, ...rest } means:

From props, get the Component prop and then all other props given to you, and rename props to rest so you can avoid naming issues with the props passed to the Route render function

Your interpretation is not quite correct. Based on your thoughts though, it sounds like you're at least aware of the fact that what is happening here amounts to some sort of object destructuring (see second answer and comments there for more clarification).

To give an accurate explanation, let's break down the { component: Component, ...rest } expression into two separate operations:

1. Operation 1: Find the component property defined on props (Note: lowercase component) and assign it to a new location in state we call Component (Note: capital Component).
2. Operation 2: Then, take all remaining properties defined on the props object and collect them inside an argument called rest.

The important point is that you're NOT renaming props to rest. (And nor does it have to do with trying to "avoid naming issues with the props passed to the Route render function".)

rest === props;
// => false

You're simply pulling off the rest (hence why the argument is named that) of the properties defined on your props object into a new argument called rest.

---

Example Usage

Here's an example. Let's assume we have an object `myObj` defined as follows:

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

For this example, it may help to just think of props as having the same structure (i.e., properties and values) as shown in myObj. Now, let's write the following assignment.

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

The statement above amounts to both the declaration and assignment of two variables (or, I guess, constants). The statement can be thought out as:

Take property name defined on myObj and assign its value to a new variable we call Username. Then, take whatever other properties were defined on myObj (i.e., age, sex and dob) and collect them into a new object assigned to the variable we name rest.

Logging Username and rest to the console would confirm this. We have the following:

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

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

---

Side Note

You may wonder:

Why go through the trouble of pulling off the component property only to rename it Component with a capital letter "C"?

Yeah, it seems pretty trivial. And, while it is a standard React practice, there's a reason all of Facebook's documentation on its framework is written as such. Namely, capitalizing custom components rendered with JSX is less a practice per se than it is a necessity. React, or more properly, JSX is case-sensitive. Custom components inserted without a capitalized first letter are not rendered to the DOM. This is just how React has defined itself to identify custom components. Thus, had the example not additionally renamed the component property that was pulled off of props to Component, the <component {...props} /> expression would fail to render properly.

这篇关于这是什么意思...在 React JSX 中休息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！