如何解决在 React 中使用 Props 的更好方法是什么?
两者有什么区别,哪个更好?
const Person=({firstName,lastName})=>{
return(
<div>
<p>{'${firstName}${lastName}'}</p>
</div>
)
}
或
const Person=(props)=>{
return(
<div>
<p>{props.firstName}{props.lastName}</p>
</div>
)
}
解决方法
实际上第一个应该是:-
const Person=({firstName,lastName})=>{
return(
<div>
<p>{'${firstName}${lastName}'}</p>
</div>
)
}
您需要从 React 为您制作的 props
对象中解构属性。
这里没有好坏之分。两者都可以达到您的目的。使用第二个,因为 props.blabla
会让你头疼,而单独使用 blabla
更有意义。
编辑 - @xflorin94 添加了一个很好的示例,您只需从 props
对象中提取与当前组件使用相关的所需属性,您可以使用 ...
获取其余的属性并将它们传递给其他一些 ChildComponent 、函数、hook 等任何可以使用它的地方。
当我使用第一种方法时,我会给你一个例子:
class Person({firstName,lastName,...props)} => {
return (
<>
<p>{firstName}</p>
<p>{lastName} </p>
<ChildComponent {...props} />
</>
)
}
我使用 props
代替将所有 <ChildComponent/>
写入 {...props}
。或者我的 ChildComponent
没有固定数量的 props 等。我主要在制作可重用组件时使用它。
没有好坏之分。事实上,这取决于你。但是我会建议您使用解构来访问您的对象属性。因为它干净且易于理解没有任何垃圾,也不需要重复访问道具。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。