在 React 中将道具传递给组件的更好方法是什么？

Question

哪个更适合传递道具？将整个对象作为道具传递？或分别传递它们？例如title="sample" description="sample desc"我知道它的情况。但是，在动态、后端就绪（API 集成）和性能方面，您更喜欢哪个？对不起，如果我描述得不好，但我相信你明白我的观点。您的所有建议都是值得欢迎和正确的。谢谢！！编辑：还有缺点和优点

Answer 1

让我们看看每个选项的优缺点，给定组件：User

const User = ({name,lastName}) => <>...</>

破坏道具：

const props = {

  name: 'Jhon',

  lastName: 'Cena'

};

<User {...props}/>

优点

• 短

缺点

• 键必须与属性匹配

• 容易出错，当组件未使用某些键时，可能会出现意外行为

• 无自动完成和自动建议

const props = {

  name: 'Jhon',

  lastName: 'Cena',

  id: 325013213

};

// User component might be updated in future releases and might use id unexpectedly.

<User {...props}/>

传递命名道具

const props = {

  user: 'Jhon',

  lastName: 'Cena'

};

<User name={user} lastName={lastName}/>

优点

• 自动完成和自动建议

• 值不必与 prop 名称匹配（如name={user})

• 维护

缺点

• 长语法

• 在许多道具上不可读

• 可重复 （className={className})

---

破坏命名的道具

const props = {

  name: 'Jhon',

  lastName: 'Cena'

};

<User {...{ name,lastName }}/>

道具

• 自动完成和自动建议

• 维护

• 读

缺点

• 外观和感觉都很糟糕

---

在我的代码库中，我试图组合：

const props = {

  className: 'user',

  user: 'Jhon',

  lastName: 'Cena'

};

<User {...{className,lastName} name={user}/>

// Although you totally can write like this,

// I find it confusing

<User {...{className, name:user,lastName}/>

Answer 2

我想这取决于你在 React 组件中需要什么。我通常更喜欢保持我的组件尽可能干净（纯净），并且只通过任何需要的东西作为道具。

我建议阅读如何在 reacts.org 网站上指导反应和反应组件/道具中的思维。请记住，在JS原子值（字符串，数字，布尔值等）中，对象（数组也是对象）通过引用传递（请参阅此处和此处），传递对象意味着您始终冒着在子组件中改变对象的风险，这直接与以下严格规则相矛盾：“所有 React 组件必须像纯函数一样操作其 props。

编辑：也就是说，这仍然取决于您的要求。如果您坚持不改变传递的对象，那应该没问题。

这应该为您提供有关如何设计组件的相当好的指南。

Answer 3

在我看来，我更喜欢将整个对象作为道具传递。因为它易于使用和转换您想要的任何内容。

Answer 4

我会说作为对象会更好。就像我一样，如果您需要通过API发送，您可以轻松地将其转换为json。传入对象也会将其设置为标准命名约定。当作为单独的道具传递时，您可以灵活地重命名它们，但这可能会导致人为错误。如果将其作为对象传递，则从一开始就定义命名，并且不会更改它。因此，当在多个组件中引用对象时，您不必在道具中传递它时引用您定义的内容