rest在React JSX中是什么意思？

Question

看看这个React路由器Dom v4示例https://reacttraining.com/react-router/web/example/auth-workflow 我看到PrivateRoute组件像这样分解rest道具

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

我想确定{组件： Component，... rest}的意思是：

从props中，获取组件prop，然后获取所有其他给您的prop，并将props重命名为rest，这样您就可以避免传递到路由渲染函数的prop的命名问题

我说得对吗？

Answer 1

让我们保持简单：在JavaScript中，如果"key： value"对是相同的，那么obj={帐户：帐户}与obj={帐户}相同。因此，当从父组件传递道具到子组件时：

const Input = ({name,label,error, ...rest}) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        {...rest}
        autoFocus
        name={name}
        id={name}
        className="form-control"
        aria-describedby="emailHelp"
      />
    </div>
  );
};
export default Input;

您将通过其余的道具：

label={label} placeholder={placeholder} type={type}

Answer 2

它允许您在一个简洁的表达式中“传播”所有道具。例如，假设您的PrivateRoute组件接收到的props如下所示

// `props` Object:
{
  thing1: 'Something',
  thing2: 'Something else'
}

如果您想进一步将这些项目（即thing1和thing2）移交给嵌套的

<Component
  thing1={ props.thing1 }
  thing2={ props.thing2 } />

但是，{…props}语法允许您以传播值数组（例如，[…vals]）的相同方式传播props对象，从而避免了这种冗长。换句话说，下面的JSX表达式和上面的JSX表达式完全相同。

<Component { ...props } />

Answer 3

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

你问：

我想确定{component:component，…rest}的意思是：

从props中，获取组件道具和所有其他道具，并将道具重命名为rest，这样您就可以避免道具的命名问题传递到路由渲染函数

你的解释不太正确。不过，根据你的想法，听起来你至少意识到这样一个事实，即这里发生的事情相当于某种对象破坏（见第二个答案和那里的评论以获得更多澄清）。

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

1. 操作1：找到在props（注：小写组件）上定义的组件属性，并将其分配到我们称为组件（注：大写组件）的状态下的新位置。
2. 操作2：然后，获取在props对象上定义的所有剩余属性，并将它们收集到一个名为rest的参数中。

重要的一点是，您没有将props重命名为rest。（这也与试图“避免传递给Routerender函数的props的命名问题”无关。）

rest === props;
// => false

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

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

对于本例，仅将props视为具有与myObj中所示相同的结构（即属性和值），可能会有所帮助。现在，让我们写下面的作业。

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

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

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

将Username和rest记录到控制台将确认这一点。我们有以下几点：

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

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

为什么要麻烦地拔下组件属性，只将其重命名为组件，并使用大写字母“C”？

是的，看起来很琐碎。而且，虽然这是一种标准的React实践，但Facebook在其框架上的所有文档都是这样编写的，这是有原因的。也就是说，使用JSX呈现的自定义组件的资本化与其说是一种实践本身，不如说是一种必要。React，或者更恰当地说，JSX是区分大小写的。没有大写首字母插入的自定义组件不会呈现给DOM。这就是React定义自己以识别自定义组件的方式。因此，如果示例没有将从props中提取的组件属性另外重命名为组件，则