findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper which is inside StrictMode.
阿新 • • 發佈:2021-09-15
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團隊之後能解決這個問題吧。