pro-components
pro-components copied to clipboard
ant-design
findDOMNode is deprecated and will be removed in the next major release.
Reproduction link
https://github.com/yuzh0816/antd-test
Steps to reproduce
执行npm run dev后，打开控制台即可看到报错
What is expected?
希望这处报错被解决。
What is actually happening?
报错： Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference.
| Environment | Info |
|---|---|
| antd | 5.21.1 |
| React | 18.3.1 |
| System | Windows Server 2022 |
| Browser | 所有浏览器 |
在 Ant Design 的 GitHub 仓库中，确实有一些与 findDOMNode 被弃用相关的问题和 PR。以下是一些相关的链接：
- Issue ant-design/ant-design#243 - 什么时候支持React 0.14.x 来着？
- Issue ant-design/ant-design#400 - react-dom支持
- Issue ant-design/ant-design#13277 - Access the inner dom of components
- PR ant-design/ant-design#18555 - feat(Input): add input ref prop
- Issue ant-design/ant-design#22477 - Warning: findDOMNode is deprecated in StrictMode.
你可以参考这些问题和 PR，看看是否有解决方案适用于你的情况。
通常情况下，解决这个问题的方法是避免使用 findDOMNode，而是直接在你需要引用的元素上使用 ref。如果你能提供具体的代码片段，我可以帮助你进行修改。
如果你有进一步的问题，请在评论中描述并 @petercat-assistant 以开始与我对话。
![petercat-assistant[bot] avatar](https://avatars.githubusercontent.com/in/875736?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hello @yuzh0816. Please provide a online reproduction by forking this one or provide a minimal GitHub repository like create-react-app-antd. Issues labeled by Need Reproduce will be closed if no activities in 3 days.
你好 @yuzh0816，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个在线重现案例 ，或者提供一个最小化的 GitHub 仓库（类似 create-react-app-antd）。3 天内未跟进此 issue 将会被自动关闭。
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
目前没有找到与 findDOMNode 相关的具体解决方案。为了帮助你解决这个问题，我建议你在代码中查找使用 findDOMNode 的地方，并将其替换为直接使用 ref。
以下是一个简单的示例，展示了如何将 findDOMNode 替换为 ref：
之前的代码：
import ReactDOM from 'react-dom';
class MyComponent extends React.Component {
componentDidMount() {
const node = ReactDOM.findDOMNode(this);
// 你的逻辑
}
render() {
return <div>My Component</div>;
}
}
修改后的代码：
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
const node = this.myRef.current;
// 你的逻辑
}
render() {
return <div ref={this.myRef}>My Component</div>;
}
}
你可以在你的项目中查找所有使用 findDOMNode 的地方，并按照上述方式进行修改。
如果你在修改过程中遇到任何问题，请随时在评论中描述你的问题并 @petercat-assistant 与我进行对话。
For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.
以下的 Issues 可能会帮助到你 / The following issues may help you
- [#8685][🧐[问题] QueryFilter组件 findDOMNode is deprecated and will be removed in the next major release][83%]
- [#8686][🐛[BUG] pro-layout 报警告 findDOMNode is deprecated and will be removed in the next major release.][70%]
有不少类似问题：https://github.com/ant-design/pro-components/issues?q=sort%3Aupdated-desc+is%3Aissue+is%3Aopen+findDOMNode
使用 ProTable 也报这个错误
版本信息 "dependencies": { "@ant-design/icons": "^5.4.0", "@ant-design/pro-components": "^2.7.15", "@apollo/client": "^3.11.4", "@types/lodash": "^4.17.7", "antd": "5.20.3", "antd-img-crop": "^4.23.0", "graphql": "^16.9.0", "lodash": "^4.17.21", "pro-components": "link: @ant-design/pro-components", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "6.6.1", "vite-plugin-eslint": "^1.8.1" },
使用方式
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
<ProTable />
注释掉<ProTable /> 就不报错
浏览器报错信息
Warning: findDOMNode is deprecated and will be removed in the next major release. 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 Error Component Stack
at SingleObserver (index.js:10:24)
at ResizeObserver2 (index.js:12:24)
at index.js:33:34
at Tooltip2 (Tooltip.js:11:32)
at index.js:30:16
at span (
解决方案之一 看了上述讨论， 将react版本降到18.2.0 就不报错了
"react": "18.2.0", "react-dom": "18.2.0",
