在 React 中使用 Props 的更好方式是什么？

Question

两者有什么区别，哪个更好？

const Person=({firstName,lastName})=>{
    return(
    <div>
    <p>{'${firstName}${lastName}'}</p>
    </div>
    )
    }

或

const Person=(props)=>{
return(
<div>
<p>{props.firstName}{props.lastName}</p>
</div>
)
}

Answer 1

其实第一个应该是:-

const Person=({firstName,lastName})=>{
    return(
    <div>
    <p>{'${firstName}${lastName}'}</p>
    </div>
    )
    }

您需要从 React 为您创建的 props 对象中解构属性。

这里没有好坏之分。两者都可以达到您的目的。使用第二个，在写 props.blabla 让你头疼的地方，而 blabla 单独使用更有意义的地方。

Edit - @xflorin94 添加了一个很好的示例，其中您仅从与当前组件使用相关的 props 对象中提取所需的属性，并且您可以使用 ... 获取其余属性并将它们传递给其他一些 ChildComponent , function, hook等任何你可以使用它的地方。

Answer 2

有一个没有任何好坏。实际上，这取决于你。但我会建议您使用 destructure 来访问您的对象属性。因为它干净易懂，没有任何垃圾，也不需要重复访问道具。

Answer 3

我用第一种方法给大家举个例子：

class Person({firstName, lastName, ...props)} => {
 return (
   <>
     <p>{firstName}</p>
     <p>{lastName} </p>
     <ChildComponent {...props} />
   </>
 )
}

而是将所有 props 写入 <ChildComponent/>，我使用 {...props}。或者我的 ChildComponent 没有固定数量的道具等。我主要在制作可重用组件时使用它。

在 React 中使用 Props 的更好方式是什么？

Which is a better way to use Props in React?

javascript

reactjs

prop