站長資訊網(wǎng)
react中modal不生效的解決辦法：1、將“main.jsx”文件中的“
”去掉；2、在使用modal組件的地方，給Modal添加兩個屬性“transitionName="" maskTransitionName=""”；3、升級“ant-design”即可。
本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。
react中modal不生效怎么辦？
react中使用ant組件庫的modal彈窗報錯
解決在react項目中使用ant-design庫中的modal彈窗控制臺報錯問題
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ā)項目中，React.StrictMode這個標(biāo)簽做代碼校驗功能還是比較重要的，最好不要關(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升級解決這個問題
推薦學(xué)習(xí)：《react視頻教程》
