解決react警告：findDOMNode is deprecated in StrictMode. findDOMNode

水冗水孚發表於2021-11-17
React

問題描述

  • 框架：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>
      </>
    )
  }
}

相關文章