翻译：findDOMNode已弃用，并将在下一个主要版本中删除。相反，直接向要引用的元素添加一个ref

原因

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

是因为Antd组件中有些使用了CSSTransition，但是CSSTransition中的部分代码的写法对于react而言，不是最新的写法，不是非常规范的写法，所以严格模式下的react就会抛出警告。但是这个实际并不影响使用，因为严格模式只会在开发模式下使用。在生产模式下就不会出现这样的警告了。

解决方案：

1.去除严格模式（一般在app.tsx或者index.tsx）

root.render(
  // <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  // </React.StrictMode>
);

但是这种方式有点因噎废食，因为在开发项目中，React.StrictMode这个标签做代码校验功能还是比较重要的，最好不要关闭。

2.不使用Antd组件的css效果

例如，当我们关闭Model组件的css动画效果之后，就不会出现这个警告报错。因为不使用AntD组件的动画，就不会用到其组件内部的CSSTransition，就不会被react的严格模式解析到，就不会出现警告，代码举例：

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

3.等待Antd升级

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