看看这个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这样就可以避免传递给Routerender函数的属性的命名问题
我对吗？
抱歉，我意识到我的第一个答案（虽然希望仍能提供有用的/附加的上下文）不能回答您的问题。让我再试一遍。
你问：
我想确定这
{ component: Component, ...rest }意味着：从中
props获取Component道具，然后将所有其他道具props提供给您，然后重命名props为，rest这样您就可以避免props传递给Routerender函数的命名问题
您的解释不太正确。但是，根据您的想法，听起来您至少知道以下事实：某种形式的对象破坏（请参见第二个答案和评论以获取更多说明）。
为了给出准确的解释，让我们将{ component: Component, ...rest }表达式分解为两个单独的操作：
component上定义的属性props（注意：小写Ç omponent），并将其分配给状态我们称之为新的位置Component（注：资本Ç omponent）。props并将它们收集在称为的参数中rest。重要的一点是您不会重命名props为rest。（并且也与尝试“避免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（即，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拉出的属性，则该表达式将无法正确呈现。propsComponent<component {...props} />
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句