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箭頭函數(shù)寫法的問題，當(dāng)需要在嵌套中寫入HTML代碼時，箭頭函數(shù)后邊不需要加大括號{}，直接用小括號()即可
在render()函數(shù)內(nèi)使用大括號{}會識別成函數(shù)從而不會渲染到頁面上，小括號內(nèi)的內(nèi)容會識別成代碼塊正常渲染
點擊antd select下拉框時Unable to preventDefault inside passive event listener invocation.
最近在寫一個項目，用到了antd的下拉框，點擊的時候發(fā)現(xiàn)控制臺報這個錯誤：
Unable to preventDefault inside passive event listener invocation
各種查資料，匯總了幾種解決方法
只有第三種起作用，可能是和我的項目有關(guān)：
1.在addEventListener增加第三個參數(shù){ passive: false }，在報錯的組件里并沒有用到這個
2.設(shè)置全局樣式: 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.
真是出了一個坑，又掉進另外一個坑。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React中使用外部樣式的3種方式(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了React如何立即更新DOM問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
在React中,SVG（Scalable?Vector?Graphics）的使用非常普遍,因為它們提供了可伸縮的矢量圖形,這對于現(xiàn)代Web應(yīng)用來說是非常重要的,以下是幾種常見的在React中使用SVG的方法,每種方法都有其特定的用例和最佳實踐,需要的朋友可以參考下2024-11-11
React配置Redux并結(jié)合本地存儲設(shè)置token方式
這篇文章主要介紹了React配置Redux并結(jié)合本地存儲設(shè)置token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
Create?react?app修改webapck配置導(dǎo)入文件alias
這篇文章主要為大家介紹了Create?react?app修改webapck配置導(dǎo)入文件alias,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
在react中使用highlight.js將頁面上的代碼高亮的方法
本文通過 highlight.js 庫實現(xiàn)對文章正文 HTML 中的代碼元素自動添加語法高亮，具有一定的參考價值，感興趣的可以了解一下2022-01-01
react中如何使用定義數(shù)據(jù)并監(jiān)聽其值
這篇文章主要介紹了react中如何使用定義數(shù)據(jù)并監(jiān)聽其值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了React性能優(yōu)化方法總結(jié)，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了React hooks異步操作踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
淺談React Router關(guān)于history的那些事
這篇文章主要介紹了淺談React Router關(guān)于history的那些事，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04