为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

长风秋雁 2022-09-23 16:12:05

哪个更适合传递道具?

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

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

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

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

编辑:还有缺点和优点


查看完整描述

4 回答

?
翻过高山走不出你

TA贡献1525条经验 获得超2个赞

让我们看看每个选项的优缺点,给定组件: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}/>


查看完整回答
反对 回复 2022-09-23
?
德玛西亚99

TA贡献1444条经验 获得超3个赞

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

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

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

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


查看完整回答
反对 回复 2022-09-23
?
DIEA

TA贡献1491条经验 获得超2个赞

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


查看完整回答
反对 回复 2022-09-23
?
慕哥6287543

TA贡献1476条经验 获得超10个赞

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


查看完整回答
反对 回复 2022-09-23
  • 4 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信