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