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

你问：

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

From props，获取Componentprop 然后所有其他props给你，并重命名props为，rest这样你就可以避免props传递给 Routerender函数的命名问题

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

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

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

重要的一点是你没有重命名props为rest. （并且它也与试图“避免props传递给 Routerender函数的命名问题”有关。）

rest === props;
// => false

您只是将对象上定义的属性的其余部分（因此命名为该参数）props转换为名为rest.

示例用法

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从propsto中提取的属性Component，则<component {...props} />表达式将无法正确呈现。

它允许您props在一个简洁的表达中“传播”所有内容。例如，让我们假设props您的PrivateRoute组件接收到的看起来像

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

如果您想进一步将这些项目（即,thing1和thing2）传递给嵌套<Component />标记并且您不熟悉对象扩展语法，您可以编写：

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

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

<Component { ...props } />

让我们保持简单：在 JavaScript 中，如果“键：值”对相同， obj={account:account}则与obj={account}. 因此，当将props从父组件传递给子组件时：

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;

你将传递其余的props：

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