在 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

我给你一个使用第一种方法时的例子：

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

我使用

props

，而不是将所有

<ChildComponent/>

写成

{...props}

。或者我的

ChildComponent

没有固定数量的道具等。我主要在制作可重用组件时使用它。

Answer 3

没有好坏之分。事实上，这取决于你。但我建议您使用破坏来访问对象的属性。因为它干净且易于理解，所以没有混乱，也不需要重复访问道具。