1. 程式人生 > 其它 >findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper which is inside StrictMode.

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper which is inside StrictMode.

1. 警告資訊

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper which is inside StrictMode. 
Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

2. 翻譯(機翻)

警告:findDOMNode在StrictMode中已棄用。給findDOMNode傳遞了一個DomWrapper位於StrictMode中的例項。相反,直接向要引用的元素新增一個ref。更多關於安全使用參考的資訊請訪問:https://reactjs.org/link/strict-mode-find-nodee。

3. 分析

ReactDOM.findDOMNode 可以用來找 DOM 節點,但現在並
不推薦這樣做,並且在嚴格模式中棄用該方法。findDOMNode的使用可能打破了封裝性,而且可以用更好的辦法代替findDOMNode去獲取DOM節點(比如ref)。

4. 解決方法

所以解決方法就可以從兩點入手:

(1)規範使用react寫法

找到報錯的位置,查詢react文件,規範寫法

(2)關閉react的嚴格模式

去掉StrictMode即可去除該報錯資訊

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

不過仔細看報錯資訊,會發現是antd中底層元件rc-menu使用到了findDOMNode,為了去除antd的警告而取消嚴格模式也不是很好的主意。而且這個報錯只會在開發環境提示,打包後的專案中是不會有的,所以我決定還是不關閉嚴格模式,希望antd團隊之後能解決這個問題吧。