解决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=""是去除弹框动画属性 /}

弹框内容

弹框内容

弹框内容


) } } ```