解決react警告:findDOMNode is deprecated in StrictMode. findDOMNode was passed an...

語言: CN / TW / HK

theme: scrolls-light

問題描述

  • 框架:react
  • 腳手架:create-react-app
  • UI元件:Ant Design
  • 具體元件:<Modal/> 開發專案,引入Antd的Modal彈框元件,當點選按鈕讓Model出現的時候,控制檯出現如下警告,截圖如下:

警告截圖

636.png

原因

是因為react腳手架中開啟了嚴格模式,嚴格到限制程式碼的書寫規範。相當於一個react版的eslint。不規範就會在控制檯丟擲來。具體哪裡不規範呢?

是因為Antd元件中有些使用了CSSTransition,但是CSSTransition中的部分程式碼的寫法對於react而言,不是最新的寫法,不是非常規範的寫法,所以嚴格模式下的react就會丟擲警告。但是這個實際並不影響使用,因為嚴格模式只會在開發模式下使用。在生產模式下就不會出現這樣的警告了。但是強迫症程式設計師就是想要不顯示這個警告怎麼辦?

解決方案一 關閉react嚴格模式

js ReactDOM.render( // <React.StrictMode> 不要這個react嚴格模式標籤了 <App /> // </React.StrictMode> , document.getElementById('root') ); 但是這種方式有點因噎廢食,因為在開發專案中,React.StrictMode這個標籤做程式碼校驗功能還是比較重要的,最好不要關閉。

解決方案二 不使用Antd元件的css效果

比如當我們關閉這個Model元件的css動畫效果就行了,就不會出現這個警告報錯。因為不使用AntD元件的動畫,就不會用到其元件內部的CSSTransition,就不會被react的嚴格模式解析到,就不會出現警告,程式碼如下:

js render() { return ( <> <div className="box"> <Button onClick={this.clickBtn} type="primary">點選彈框</Button> <div> {/* transitionName="" 和 maskTransitionName="" 是去除彈框動畫屬性 */} <Modal transitionName="" maskTransitionName="" title="彈框" visible={this.state.isShowModel} onOk={this.handleOk} onCancel={this.handleCancel} > <p>彈框內容</p> <p>彈框內容</p> <p>彈框內容</p> </Modal> </div> </div> ) }

解決方案三 等待Antd升級

Antd升級了以後,就會更改元件內部的動畫的寫法,更新到最新版本的寫法,就不會出現這樣的警告了

其實這個警告不用管也行的,畢竟生產環境就沒了

完整程式碼

測試的話,直接複製貼上即可 ```js import React, { Component } from 'react'

import { Button, Modal } from 'antd'; import 'antd/dist/antd.css';

export default class App extends Component { state = { isShowModel: false, } clickBtn = () => { // 點選開啟 this.setState({ isShowModel: true }) } handleOk = () => { // 點選Ok按鈕關閉 this.setState({ isShowModel: false }) } handleCancel = () => { // 點選Cancel按鈕關閉 this.setState({ isShowModel: false }) } render() { return ( <>

{/ transitionName=""和maskTransitionName=""是去除彈框動畫屬性 /}

彈框內容

彈框內容

彈框內容


) } } ```