react ant-design Select组件下拉框map不显示的解决

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.

真是出了一个坑，又掉进另外一个坑。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。