Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在使用React 18.3.0 或者React 19 Beta版本时, Menu组件都会报findDOMNode is deprecated and will be removed错误 #48646

Open
ybf970928 opened this issue Apr 26, 2024 · 19 comments
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. unconfirmed

Comments

@ybf970928
Copy link

Reproduction link

Edit on StackBlitz

Steps to reproduce

使用 Menu 组件即可

What is expected?

无报错提示信息

What is actually happening?

控制台会直接输出 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.16.4
React 18.3.0
System macos
Browser chrome
Copy link

stackblitz bot commented Apr 26, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@Lil-Kr
Copy link

Lil-Kr commented Apr 26, 2024

我也遇到了这个问题, 早上还好好的,晚上打开就这样了, @ybf970928 你的解决了么?

image

配置如下 :

image

@zhu-hong
Copy link

zhu-hong commented Apr 28, 2024

原因找到了
antd的基础工具库rc-util使用了findDOMNode,波及到的库应该很多,代码在
https://github.com/react-component/util/blob/master/src/Dom/findDOMNode.ts#L21
react18.3之前在严格模式下使用这个API会报警,react18.3及更新版本,只要程序使用了这个API就会警报
@afc163

@yoyo837
Copy link
Contributor

yoyo837 commented Apr 28, 2024

原因找到了 antd的基础工具库rc-util使用了findDOMNode,波及到的库应该很多,代码在 https://github.com/react-component/util/blob/master/src/Dom/findDOMNode.ts#L2 react18.3之前在严格模式下使用这个API会报警,react18.3及更新版本,只要程序使用了这个API就会警报

不准确,这个函数只是被调用处用来兜底的,实际逻辑处应该想办法修改逻辑优先使用例如ref等方式获取,问题不在兜底逻辑本身上。

@zhu-hong
Copy link

zhu-hong commented Apr 28, 2024

原因找到了 antd的基础工具库rc-util使用了findDOMNode,波及到的库应该很多,代码在 https://github.com/react-component/util/blob/master/src/Dom/findDOMNode.ts#L2 react18.3之前在严格模式下使用这个API会报警,react18.3及更新版本,只要程序使用了这个API就会警报

不准确,这个函数只是被调用处用来兜底的,实际逻辑处应该想办法修改逻辑优先使用例如ref等方式获取,问题不在兜底逻辑本身上。

resize-observer直接使用findDOMNode导致的,我使用了rc-select并使用了getRawInputElement这个参数也会有这个警告
https://github.com/react-component/resize-observer/blob/master/src/SingleObserver/index.tsx#L40

@Yizhizhenhties
Copy link

我发现有很多组件都会出现这种情况
比如Tooltip,如果是:

<Tooltip>
    <Checkbox/>
</Tooltip>

或者把 checkbox 换成 select 就会有问题

<Cascader>
    <Button/>
</Cascader>

这样也会有问题
奇怪的是 如果子组件是一些基础元素就没啥问题

@shanmugarajbe
Copy link

Also, this issue is present in Antd Tour Component,
<Tour />

@afc163 afc163 added the help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. label Apr 29, 2024
Copy link
Contributor

Hello @ybf970928. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @ybf970928,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

giphy

@codedart2018
Copy link

同样此问题,我目前固定版本降到18.2.0了,18.3以上可以了踢我啊!

@shanmugarajbe
Copy link

I have the same problem. My current fixed version has been downgraded to 18.2.0. If it is 18.3 or above, kick me!

Yes my current version is 18.3
Antd version is 5.16.4

@afc163
Copy link
Member

afc163 commented Apr 30, 2024

#48709

@shengzhou1216
Copy link

re-uitl 的问题吧,其他库都是直接调用findDOMNode的

@jekip
Copy link

jekip commented May 2, 2024

同样此问题,我目前固定版本降到18.2.0了,18.3以上可以了踢我啊!

+1

@leshalv
Copy link
Contributor

leshalv commented May 6, 2024

+1

@sunxun007
Copy link

原因找到了 antd的基础工具库rc-util使用了findDOMNode,波及到的库应该很多,代码在 https://github.com/react-component/util/blob/master/src/Dom/findDOMNode.ts#L2 react18.3之前在严格模式下使用这个API会报警,react18.3及更新版本,只要程序使用了这个API就会警报

不准确,这个函数只是被调用处用来兜底的,实际逻辑处应该想办法修改逻辑优先使用例如ref等方式获取,问题不在兜底逻辑本身上。

resize-observer直接使用findDOMNode导致的,我使用了rc-select并使用了getRawInputElement这个参数也会有这个警告 https://github.com/react-component/resize-observer/blob/master/src/SingleObserver/index.tsx#L40

严格模式我关闭了还是报错.不知道是不是关闭错了地方

@ybf970928
Copy link
Author

原因找到了 antd的基础工具库rc-util使用了findDOMNode,波及到的库应该很多,代码在 https://github.com/react-component/util/blob/master/src/Dom/findDOMNode.ts#L2 react18.3之前在严格模式下使用这个API会报警,react18.3及更新版本,只要程序使用了这个API就会警报

不准确,这个函数只是被调用处用来兜底的,实际逻辑处应该想办法修改逻辑优先使用例如ref等方式获取,问题不在兜底逻辑本身上。

resize-observer直接使用findDOMNode导致的,我使用了rc-select并使用了getRawInputElement这个参数也会有这个警告 https://github.com/react-component/resize-observer/blob/master/src/SingleObserver/index.tsx#L40

严格模式我关闭了还是报错.不知道是不是关闭错了地方

不是啊, 问题很简单, 源码里使用到了findDOMNode这个方法, 改成ref的方式就差不多了, 不着急, 等官方慢慢调整就好了

@zhu-hong
Copy link

zhu-hong commented May 7, 2024

原因找到了 antd的基础工具库rc-util使用了findDOMNode,波及到的库应该很多,代码在 https://github.com/react-component/util/blob/master/src/Dom/findDOMNode.ts#L2 react18.3之前在严格模式下使用这个API会报警,react18.3及更新版本,只要程序使用了这个API就会警报

不准确,这个函数只是被调用处用来兜底的,实际逻辑处应该想办法修改逻辑优先使用例如ref等方式获取,问题不在兜底逻辑本身上。

resize-observer直接使用findDOMNode导致的,我使用了rc-select并使用了getRawInputElement这个参数也会有这个警告 https://github.com/react-component/resize-observer/blob/master/src/SingleObserver/index.tsx#L40

严格模式我关闭了还是报错.不知道是不是关闭错了地方

react18.3及更新版本,只要用到了就会爆警告(不限于使用了严格模式),https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-reactdom-finddomnode

@hl1249
Copy link

hl1249 commented May 7, 2024

同样此问题,我目前固定版本降到18.2.0了,18.3以上可以了踢我啊!

请问一下 我降到了18.2.0 为啥还在报错

@yoyo837
Copy link
Contributor

yoyo837 commented May 7, 2024

同样此问题,我目前固定版本降到18.2.0了,18.3以上可以了踢我啊!

请问一下 我降到了18.2.0 为啥还在报错

npm ls react一下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. unconfirmed
Projects
None yet
Development

No branches or pull requests