Solve the react warning: findDOMNode is deprecated in StrictMode. findDOMNode

Problem Description

• Frame: react
• Scaffolding: create-react-app
• UI components: Ant Design
• Specific components: <Modal/>

The development project introduces Antd's Modal bullet frame component. When the button is clicked to make the Model appear, the following warning appears in the console. The screenshot is as follows:

Warning screenshot

reason

It is because the strict mode is turned on in the react scaffolding, which is strictly limited to the writing specifications of the code. It is equivalent to a react version of eslint. Irregularities will be thrown in the console. Where are the specific irregularities?

It is because some of the Antd components use CSSTransition, but the writing of some of the code in CSSTransition is not the latest writing for React, and it is not a very standardized writing, so React in strict mode will throw a warning. But this does not actually affect the use, because the strict mode will only be used in the development mode. No such warning will appear in production mode. But what if the obsessive-compulsive programmer just wants not to display this warning?

Solution 1: Turn off react strict mode

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

But this method is a bit of a choking, because in the development project, the React.StrictMode tag is still more important for code verification, and it is best not to close it.

Solution two does not use the css effect of Antd components

For example, when we close the css animation effect of this Model component, this warning and error will not appear. Because the animation of the AntD component is not used, the CSSTransition inside its component will not be used, it will not be parsed by the strict mode of react, and there will be no warning. The code is as follows:

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>
      </>
    )
  }

Solution three wait for Antd to upgrade

After Antd is upgraded, the writing method of the animation inside the component will be changed, and if the writing method of the latest version is updated, there will be no such warning.

In fact, this warning is fine, because the production environment is gone after all.

Complete code

For testing, just copy and paste

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>
      </>
    )
  }
}