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

Question

哪个更适合传递道具？

• 将整个对象作为道具传递？或

• 分别传递它们？例如title="sample" description="sample desc"

我知道它的情况。但是，在动态、后端就绪（API 集成）和性能方面，您更喜欢哪个？对不起，如果我描述得不好，但我相信你明白我的观点。

您的所有建议都是值得欢迎和正确的。谢谢！！

编辑：还有缺点和优点

Answer 1

让我们看看每个选项的优缺点，给定组件：Userconst User = ({name,lastName}) => <>...</>破坏道具：const props = {&nbsp; name: 'Jhon',&nbsp; lastName: 'Cena'};<User {...props}/>优点短缺点键必须与属性匹配容易出错，当组件未使用某些键时，可能会出现意外行为无自动完成和自动建议const props = {&nbsp; name: 'Jhon',&nbsp; lastName: 'Cena',&nbsp; id: 325013213};// User component might be updated in future releases and might use id unexpectedly.<User {...props}/>传递命名道具const props = {&nbsp; user: 'Jhon',&nbsp; lastName: 'Cena'};<User name={user} lastName={lastName}/>优点自动完成和自动建议值不必与 prop 名称匹配（如name={user})维护缺点长语法在许多道具上不可读可重复 （className={className})破坏命名的道具const props = {&nbsp; name: 'Jhon',&nbsp; lastName: 'Cena'};<User {...{ name,lastName }}/>道具自动完成和自动建议维护读缺点外观和感觉都很糟糕在我的代码库中，我试图组合：const props = {&nbsp; className: 'user',&nbsp; user: 'Jhon',&nbsp; 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。传入对象也会将其设置为标准命名约定。当作为单独的道具传递时，您可以灵活地重命名它们，但这可能会导致人为错误。如果将其作为对象传递，则从一开始就定义命名，并且不会更改它。因此，当在多个组件中引用对象时，您不必在道具中传递它时引用您定义的内容