javascript - React JSX 中的 ...rest 是什么意思？

Question

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

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

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

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

我说得对吗？

Answer 1

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

你问:

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

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

你的解释不太正确。不过，根据您的想法，听起来您至少意识到这里发生的事情相当于某种object destructuring (请参阅第二个答案和评论以获取更多说明)。

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

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

重要的一点是您没有重命名 props至rest 。 (这也与尝试“避免传递给路由 props 函数的 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

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

Take property name defined on myObj and assign its value to a newvariable we call Username. Then, take whatever other properties weredefined on myObj (i.e., age, sex and dob) and collect theminto a new object assigned to the variable we name 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) }

<小时/>

旁注

您可能想知道:

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

是的，看起来很微不足道。而且，虽然这是标准的 React 实践，但 Facebook's documentation 是有原因的。其框架上是这样写的。也就是说，利用 JSX 渲染的自定义组件本身与其说是一种实践，不如说是一种必要。 react ，或更准确地说，JSX is case-sensitive 。插入的首字母不大写的自定义组件不会呈现到 DOM。这正是 React 定义自身来识别自定义组件的方式。因此，如果该示例没有另外重命名为 component被夺走的属性(property) props至Component ，<component {...props} />表达式将无法正确渲染。