乐趣区

关于react.js:解决react警告findDOMNode-is-deprecated-in-StrictMode-findDOMNode

jiezi

问题形容

  • 框架：react
  • 脚手架：create-react-app
  • UI 组件：Ant Design
  • 具体组件：<Modal/>

开发我的项目，引入 Antd 的 Modal 弹框组件，当点击按钮让 Model 呈现的时候，控制台呈现如下正告，截图如下：

正告截图

起因

是因为 react 脚手架中开启了严格模式，严格到限度代码的书写标准。相当于一个 react 版的 eslint。不标准就会在控制台抛出来。具体哪里不标准呢？

是因为 Antd 组件中有些应用了 CSSTransition，然而 CSSTransition 中的局部代码的写法对于 react 而言，不是最新的写法，不是十分标准的写法，所以严格模式下的 react 就会抛出正告。然而这个理论并不影响应用，因为严格模式只会在开发模式下应用。在生产模式下就不会呈现这样的正告了。然而强迫症程序员就是想要不显示这个正告怎么办？

解决方案一 敞开 react 严格模式 

ReactDOM.render(
  // <React.StrictMode> 不要这个 react 严格模式标签了
    <App />
  // </React.StrictMode>
  ,
  document.getElementById('root')
);

然而这种形式有点因噎废食，因为在开发我的项目中，React.StrictMode 这个标签做代码校验性能还是比拟重要的，最好不要敞开。

解决方案二 不应用 Antd 组件的 css 成果

比方当咱们敞开这个 Model 组件的 css 动画成果就行了，就不会呈现这个正告报错。因为不应用 AntD 组件的动画，就不会用到其组件外部的 CSSTransition，就不会被 react 的严格模式解析到，就不会呈现正告，代码如下：

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 降级了当前，就会更改组件外部的动画的写法，更新到最新版本的写法，就不会呈现这样的正告了

其实这个正告不必管也行的，毕竟生产环境就没了

残缺代码

测试的话，间接复制粘贴即可 

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 (
      <>
        <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>
      </>
    )
  }
}
退出移动版