看看这个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的命名问题
我说得对吗?
让我们保持简单:在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}
它允许您在一个简洁的表达式中“传播”所有道具。例如,假设您的
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 } />
抱歉,我意识到我的第一个答案(希望仍然提供有用的/额外的上下文)没有回答您的问题。让我再试一次。
你问:
我想确定{component:component,…rest}
的意思是:
从props
中,获取组件道具和所有其他道具,并将道具重命名为rest
,这样您就可以避免道具的命名问题传递到路由渲染
函数
你的解释不太正确。不过,根据你的想法,听起来你至少意识到这样一个事实,即这里发生的事情相当于某种对象破坏(见第二个答案和那里的评论以获得更多澄清)。
为了给出准确的解释,让我们将{component:component,…rest}
表达式分解为两个单独的操作:
props
(注:小写组件)上定义的组件
属性,并将其分配到我们称为组件
(注:大写组件)的状态下的新位置。 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
中提取的组件
属性另外重命名为组件
,则
问题内容: 我已经看到了声明,接口和类 这是什么意思? 问题答案: 没有证据,我相信您在谈论Java的泛型支持… 泛型允许您抽象类型 在Java 5之前,很难提供能够支持多种不同类型的Objects的类而不必为每种特定情况编写代码,因此人们通常会这样做。 这导致在运行时做出许多困难的选择,您必须进行运行时检查以查看是否有可能将给定的Object强制转换为可用类型…例如 现在,这已经很明显了,但是如
问题内容: 什么是在这个CSS规则是什么意思? 问题答案: 是相邻的同级组合器。 这意味着选择只选择自带 之后 的。 插图: 选择了什么,没有选择什么: 选择 这个来之后第一。 未选择 这出现在第一后而不是在。由于它不会立即跟随,因此未选中。 但是,由于它仍然紧随元素之后,选择器不会立即匹配此元素,而是将使用通用的同级组合器来匹配该元素。 未选择 这位于内,并且在引号内没有满足其选择器的内容。
问题内容: 我想知道 = + _ 运算符在JavaScript中的含义。看起来像是在做作业。 例: 问题答案: r = +_; 尝试将任何内容强制转换为数字。 只是一个变量名(不是运算符),可以是,等等。 例: 将“ 1”强制转换为纯数字1。 现在,不是。 此外,根据算术运算符的MDN页面: 一元加号运算符位于其操作数之前,并求值为其操作数,但是 尝试将其转换为数字(如果尚未转换为数字) 。 […
问题内容: 嗨,我遇到了以下代码 这到底是怎么回事?我不确定“&”在做什么。 问题答案: 回答 该符号是按位与运算符。与1一起使用时,基本上会屏蔽该值以提取最低位,换句话说,它将告诉您该值是偶数还是奇数。 有关Python运算符的更多信息 有关更多信息,请参见:http : //wiki.python.org/moin/BitwiseOperators 为什么检查奇数与偶数比较有效 编辑:添加此部
问题内容: 例如,我知道SELECT * FROM example_table; 方法。但是,不知道代码的每个部分意味着什么,我感到不舒服。我只是一个初学者,所以你们能帮我吗。非常感谢。 问题答案: 我通过分隔代码的每个部分为您提供答案。 SELECT ==它命令计算机包括或从数据库名称(表)中选择每个内容。 (*)==表示所有{这里的代码表示包括数据库中的所有内容。} FROM ==它是指我们必
问题内容: 我想知道在PHP语言中意味着什么。我看到有人在用 不知道为什么。有人可以帮我解释一下吗? 问题答案: 该运营商告诉PHP取消错误消息,这样他们就不会显示。 例如,使用: 会导致显示警告,告诉您MySQL查询无效,而 不会。 但是请注意,这是非常糟糕的编程习惯,因为它不会使错误消失,它只会将它们隐藏起来,并且会使调试变得更加糟糕,因为您看不到代码的实际问题。 而不是使用的,应禁用 ,并