在 reactjs 中，在 StrictMode 错误中不推荐使用 findDOMNode答案

【问题标题】：In reactjs, findDOMNode is deprecated in StrictMode error在 reactjs 中，在 StrictMode 错误中不推荐使用 findDOMNode
【发布时间】：2021-04-17 17:06:34
【问题描述】：

我是 React.js 的新手，正在尝试在 Ant Design 库中使用 BackTop 组件。 https://ant.design/components/back-top/

这个组件工作正常。但是我在chrome浏览器控制台中发现了一条错误消息。

index.js:1 警告：在 StrictMode 中不推荐使用 findDOMNode。 findDOMNode 被传递了一个 DomWrapper 的实例，它位于 StrictMode 中。相反，直接将 ref 添加到要引用的元素。在此处了解有关安全使用 refs 的更多信息：https://reactjs.org/link/strict-mode-find-node

这是我下面的代码。

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css'; 
import './assets/scss/global.scss';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import React from "react";
import { Route, Switch, BrowserRouter as Router } from "react-router-dom";
import Header from './layouts/Header'; 
import Home from "./pages/Home";
import About from "./pages/About"; 
import { BackTop } from 'antd';

class App extends React.Component{
  render(){
    return (
      <Router>
        <Header/>
        <div className="container">
          <div className="content">
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} /> 
            </Switch> 
          </div>
        </div> 
        <BackTop /> 
      </Router>
    )
  }
} 
export default App;

我需要更改什么来修复错误？

【问题讨论】：

findDOMNode 已被弃用。你不应该使用它。似乎有些图书馆仍在使用findDOMNode。因此，您应该忽略这一点，因为它会在库作者更新代码时得到修复。见this
@AjeetShah 好的。谢谢你的评论

标签： reactjs

【解决方案1】：

这是因为您使用的库 ant-design。 ant-design 的一些底层依赖使用了findDOMNode。

在他们的 github 上有一个关于这个问题的大线程：here

他们似乎不打算很快修复它。

作为一种解决方法，我将其添加到根文件中。我正在抑制这样的警告：

// eslint-disable-next-line
const consoleError = console.error.bind(console);
// eslint-disable-next-line
console.error = (errObj, ...args) => {
  if (
    (process.env.NODE_ENV === 'development' && typeof errObj.message === 'string' && args.includes('findDOMNode')
  ) {
    return;
  }
  consoleError(errObj, ...args);
};

我知道这不是一个修复，但至少我的控制台没有被findDOMNode 消息臃肿。在 And-Design 解决此问题之前，这将是可行的。

【讨论】：