react中使用ant組件庫(kù)的modal彈窗報(bào)錯(cuò)問(wèn)題及解決
使用ant組件庫(kù)的modal彈窗報(bào)錯(cuò)
在react項(xiàng)目中使用ant-design庫(kù)中的modal彈窗控制臺(tái)報(bào)錯(cuò)
findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper3 which is inside StrictMode.
問(wèn)題根因
react腳手架中開(kāi)啟了嚴(yán)格模式，限制代碼書(shū)寫(xiě)規(guī)范。在ant-design組件庫(kù)中使用了CSSTransition，但是CSSTransition中的部分代碼的寫(xiě)法對(duì)于react而言，不是最新的寫(xiě)法，不是非常規(guī)范的寫(xiě)法，所以嚴(yán)格模式下的react就會(huì)拋出警告。
從而導(dǎo)致彈窗無(wú)法使用
解決方案
1.關(guān)閉react的嚴(yán)格模式
將main.jsx文件中的<React.StrictMode>去掉。
但在開(kāi)發(fā)項(xiàng)目中，React.StrictMode這個(gè)標(biāo)簽做代碼校驗(yàn)功能還是比較重要的，最好不要關(guān)閉。
此方法不推薦使用。而且在新版本的react中，去掉該嚴(yán)格模式，也會(huì)有一些其他問(wèn)題。
2.不使用ant-design中的CSSTransition效果
既在使用modal組件的地方，給Modal添加兩個(gè)屬性
transitionName="" maskTransitionName=""
<Modal title="Basic Modal"
transitionName=""
maskTransitionName=""
visible={isModalVisible}
onOk={this.handleOk}
onCancel={this.handleCancel}>
<p>確定刪除該代辦任務(wù)嗎？</p>
</Modal>
3.可以等ant-design升級(jí)解決這個(gè)問(wèn)題
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于Webpack4和React hooks搭建項(xiàng)目的方法
這篇文章主要介紹了基于Webpack4和React hooks搭建項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要介紹了React事件節(jié)流效果失效的原因及解決，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)的方法
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
React中setState/useState的使用方法詳細(xì)介紹
這篇文章主要介紹了React中setState/useState的使用方法，useState 和 setState 在React開(kāi)發(fā)過(guò)程中 使用很頻繁，但很多人都停留在簡(jiǎn)單的使用階段，并沒(méi)有正在了解它們的執(zhí)行機(jī)制2023-04-04
React如何使用create-react-app創(chuàng)建react項(xiàng)目
這篇文章主要介紹了React如何使用create-react-app創(chuàng)建react項(xiàng)目問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
react中通過(guò)props實(shí)現(xiàn)父子組件間通信的使用示例
在React中,父組件可以通過(guò)props屬性向子組件傳遞數(shù)據(jù),子組件可以通過(guò)props屬性接收父組件傳遞過(guò)來(lái)的數(shù)據(jù),本文就來(lái)介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2023-10-10
這篇文章主要為大家介紹了React中classnames庫(kù)使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React Fiber中面試官最關(guān)心的技術(shù)話(huà)題
這篇文章主要為大家介紹了React Fiber中面試官最關(guān)心的技術(shù)話(huà)題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
一文教你如何避免React中常見(jiàn)的8個(gè)錯(cuò)誤
這篇文章主要來(lái)和大家一起分享在?React?開(kāi)發(fā)中常見(jiàn)的一些錯(cuò)誤,以及如何避免這些錯(cuò)誤,理解這些問(wèn)題背后的細(xì)節(jié),防止犯下類(lèi)似的錯(cuò)誤,需要的可以參考下2023-12-12
這篇文章主要介紹了react hooks入門(mén)詳細(xì)教程,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04