react 不能往组件中传入属性的值为 undefined

在使用 andt design 的时候遇到个需求,需要清除 Select 组件选中后的值,让它变成什么都没选中,显示 placeholder

刚开始以为设置为 null 即可,结果发现设置为 null 并没什么卵用,只是得到什么都没匹配上的结果,选择框中为空。

后来发现将 value 值设置为 undefined 即可。

其实,在 react 中,传入 undefined 就代表什么都没传入,这时组件中如果有默认的 props 值则会使用默认值。

所以,上面传入 null,其实也是传入了值,所以 Select 组件会根据这个值去匹配,而没匹配到所以内容为空。

而传入 undefined 的时候,其实表示什么都没传,Select 组件就不会再去匹配,而现实 placeholder 的值。

另外就是要注意,如果通过条件判断,两个分支渲染的组件都是同一个组件,只是可能组件中传入的 props 会不同。这是需要给这两个相同的组件加上 key 属性。如果没有 key 属性,条件变化后,并不会在这两个同类组件中切换,只有加上了 key 属性,才会认为这是两个不同的组件,条件变化后才会切换。

转载于:https://www.cnblogs.com/3body/p/5808265.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值