看看这个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 }意味着:
{ component: Component, ...rest }
从中props获取Component属性,然后再提供所有其他属性,然后重命名props为,rest这样就可以避免传递给Route render函数的属性的命名问题
props
rest
render
我对吗?
抱歉,我意识到我的第一个答案(虽然希望仍能提供有用的/附加的上下文)不能回答您的问题。让我再试一遍。
你问:
我想确定这{ component: Component, ...rest }意味着: 从中props获取Component道具,然后将所有其他道具props提供给您,然后重命名props为,rest这样您就可以避免props传递给Route render函数的命名问题
从中props获取Component道具,然后将所有其他道具props提供给您,然后重命名props为,rest这样您就可以避免props传递给Route render函数的命名问题
Component
您的解释不太正确。但是根据您的想法,听起来您至少知道以下事实:某种情况下对象分解(请参阅第二个答案和评论以获取更多说明)。
为了给出准确的解释,让我们将{ component: Component, ...rest }表达式分解为两个单独的操作:
component
重要的是您不会重命名props为rest。(并且也与尝试“避免props传递给Route render函数的命名问题”有关。)
rest === props; // => false
您只需将对象上定义的属性 的其余部分 (因此将其命名为该名称)提取props为一个称为的新参数rest。
这是一个例子。假设我们有一个myObj定义如下的对象:
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。
name
Username
age
sex
dob
登录Username并rest到console会证实这一点。我们有以下内容:
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拉出的属性,则该表达式将无法正确呈现。props``Component``<component {...props} />
props``Component``<component {...props} />