react ant-design Select组件下拉框map不显示的解决
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
react ant-design Select组件下拉框map不显示
问题描述
在使用Select Option下拉组件时,map遍历后不显示下拉框
- 错误写法:
{dataList && dataList.map(item =>{( <Option key={item.id} value={item.value}>{item.value}</Option )})}
- 正确写法:
{dataList && dataList.map(item =>( <Option key={item.id} value={item.value}>{item.value}</Option ))}
心得
主要是es6箭头函数写法的问题,当需要在嵌套中写入HTML代码时,箭头函数后边不需要加大括号{},直接用小括号()即可
在render()函数内使用大括号{}会识别成函数从而不会渲染到页面上,小括号内的内容会识别成代码块正常渲染
点击antd select下拉框时Unable to preventDefault inside passive event listener invocation.
最近在写一个项目,用到了antd的下拉框,点击的时候发现控制台报这个错误:
Unable to preventDefault inside passive event listener invocation
各种查资料,汇总了几种解决方法
只有第三种起作用,可能是和我的项目有关:
1.在addEventListener增加第三个参数{ passive: false },在报错的组件里并没有用到这个
2.设置全局样式: touch-action:none ,也不起作用
3.去掉插件 default-passive-events,浏览器控制台会有错误告警。。
警告如下:
useTouchMove.js:154 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
真是出了一个坑,又掉进另外一个坑。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。
相关文章
flouting?ui定位组件完美替代ant?deisgn使用详解
这篇文章主要为大家介绍了flouting?ui定位组件完美替代ant?deisgn使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-11-11
最新评论