react中modal不生效怎麼辦

react中modal不生效的解決方法：1、將「main.jsx」檔案中的「」去掉；2、在使用modal元件的地方，為Modal新增兩個屬性「transitionName =""  maskTransitionName=""」；3、升級「ant-design」即可。

本教學操作環境：Windows10系統、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腳手架中開啟了嚴格模式，限製程式碼書寫規格。在ant-design元件庫中使用了CSSTransition，但是CSSTransition中的部分程式碼的寫法對於react而言，不是最新的寫法，不是非常規範的寫法，所以嚴格模式下的react就會拋出警告。從而導致彈窗無法使用

解決方案：

#1.關閉react的嚴格模式

將main.jsx檔案中的去掉。但在開發專案中，React.StrictMode這個標籤做程式碼校驗功能還是比較重要的，最好不要關閉。此方法不建議使用。而且在新版的react中，去掉該嚴格模式，也會有一些其他問題。

2.不使用ant-design中的CSSTransition效果

既在使用modal元件的地方，為Modal增加兩個屬性

transitionName=""  maskTransitionName=""

<Modal title="Basic Modal" 
transitionName=""
maskTransitionName="" 
visible={isModalVisible} 
onOk={this.handleOk} 
onCancel={this.handleCancel}>
    <p>确定删除该代办任务吗？</p>
</Modal>

#3.可以等ant-design升級解決這個問題 

推薦學習：《 react影片教學》

以上是react中modal不生效怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！