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

react 不能往组件中传入属性的值为 undefined相关推荐

这就是为什么我们需要在React的类组件中绑定事件处理程序
by Saurabh Misra 索拉·米斯拉(Saurabh Misra) 这就是为什么我们需要在React的类组件中绑定事件处理程序 (This is why we need to bind ev ...
学习旧岛小程序（5） observer 函数中修改属性的值
不要在一个属性的 observer 函数中修改属性的值不然会造成内存泄露错误代码: properties: {/* 期刊号 */index: {type: String,observer: fu ...
Java -- XStreamAlias 处理节点中的属性和值
Java -- XStreamAlias 处理节点中的属性和值 XStreamAlias 可以把objec和xml相互转换,但是有时候节点带有属性和值就需要特殊处理下: <?xml versio ...
stream筛选出集合中对象属性重复值
stream筛选出集合中对象属性重复值字符串集合筛选 List<String> strings = Arrays.asList("a", "bb" ...
微信小程序this.setData修改对象中某个属性的值
前言做过微信小程序的同学都知道,this.setData() 方法可以修改或者更新 data 中的值 .那不知道大家有没有遇到这么一种情况,我要修改对象中某个属性的值该怎么办呢?是不是第一想到的就是 ...
js中递归调用返回值为undefined问题
js中递归调用返回值为undefined问题问题重现下面这个简单的递归函数理论上弹出的是11 但是............. 问题解决在函数调用处加return
React之类式组件中的构造器与props
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
vue组件中prop属性
Vue组件prop属性 prop大小写单项数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行. 每次父级组件发 ...
【干货】Java 判断一个对象中部分属性的值是否为空
Java中一个对象有多个属性,工作中需要对部分属性进行"非空判断".如果使用IFNULL会有大量的冗余代码,代码可读性查:如果对象新增删除了属性,判断代码需要重新进行硬编码,此违背 ...

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

react 不能往组件中传入属性的值为 undefined相关推荐

最新文章

热门文章