react中使用ant組件庫的modal彈窗報(bào)錯問題及解決
使用ant組件庫的modal彈窗報(bào)錯
在react項(xiàng)目中使用ant-design庫中的modal彈窗控制臺報(bào)錯
findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper3 which is inside StrictMode.
問題根因
react腳手架中開啟了嚴(yán)格模式，限制代碼書寫規(guī)范。在ant-design組件庫中使用了CSSTransition，但是CSSTransition中的部分代碼的寫法對于react而言，不是最新的寫法，不是非常規(guī)范的寫法，所以嚴(yán)格模式下的react就會拋出警告。
從而導(dǎo)致彈窗無法使用
解決方案
1.關(guān)閉react的嚴(yán)格模式
將main.jsx文件中的<React.StrictMode>去掉。
但在開發(fā)項(xiàng)目中，React.StrictMode這個標(biāo)簽做代碼校驗(yàn)功能還是比較重要的，最好不要關(guān)閉。
此方法不推薦使用。而且在新版本的react中，去掉該嚴(yán)格模式，也會有一些其他問題。
2.不使用ant-design中的CSSTransition效果
既在使用modal組件的地方，給Modal添加兩個屬性
transitionName="" maskTransitionName=""
<Modal title="Basic Modal"
transitionName=""
maskTransitionName=""
visible={isModalVisible}
onOk={this.handleOk}
onCancel={this.handleCancel}>
<p>確定刪除該代辦任務(wù)嗎？</p>
</Modal>
3.可以等ant-design升級解決這個問題
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決React報(bào)錯useNavigate()?may?be?used?only?in?context?of
這篇文章主要為大家介紹了解決React報(bào)錯useNavigate()?may?be?used?only?in?context?of?Router，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React文件名和目錄規(guī)范最佳實(shí)踐記錄(總結(jié)篇)
React在使用時非常靈活，如果沒有一個規(guī)范約束項(xiàng)目，在開發(fā)過程中會非?；靵y，本文將介紹幾個優(yōu)秀的規(guī)范，介紹文件名和目錄前，需要先簡述一下幾種通用的類型，用來區(qū)分文件的功能，感興趣的朋友一起看看吧2022-05-05
這篇文章主要為大家介紹了React中immutable的UI組件渲染性能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
解決React?hook?'useState'?cannot?be?called?in?
這篇文章主要為大家介紹了React?hook?'useState'?cannot?be?called?in?a?class?component報(bào)錯解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了如何對react hooks進(jìn)行單元測試的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
React實(shí)現(xiàn)點(diǎn)擊切換組件效果
這篇文章主要為大家詳細(xì)介紹了如何基于React實(shí)現(xiàn)點(diǎn)擊切換組件效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，需要的小伙伴可以學(xué)習(xí)一下2023-08-08
一個路由就是一個映射關(guān)系(key:value),key為路徑, value可能是function或component,本文給大家介紹React 路由react-router-dom詳解,感興趣的朋友跟隨小編一起看看吧2024-01-01
React Native 搭建開發(fā)環(huán)境的方法步驟
本篇文章主要介紹了React Native 搭建開發(fā)環(huán)境的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
react router 4.0以上的路由應(yīng)用詳解
本篇文章主要介紹了react router 4.0以上的路由應(yīng)用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
React?Fiber構(gòu)建completeWork源碼解析
這篇文章主要為大家介紹了React?Fiber構(gòu)建completeWork源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02