Ant-design-pro: [BUG] 项目警告Function components cannot be given refs.以及lifecycle methods been renamed

[TianenPang]

BUG描述 ：
新建的项目，启动打开welcome页面时控制台报错
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method ofResizeObserver.
以及出现大量react生命周期方法已被重命名，不建议使用的警告。

复现步骤 ：
新建最新项目并启动进入welcome页面即可发现

期望结果 ：
希望解决Function components cannot be given refs. 警告
以及react生命周期方法已被重命名，不建议使用的警告。

版本信息:：

• Ant Design Pro 版本：【4.0.0】
• umi 版本： 【2.9.6】
• Node 版本：【10.16.3】
• 浏览器环境：【Google Chrome 77.0.3865.90】
• 开发环境：【Windows 10 1903】

警告截图 ：

[TianenPang]

新版本react生命周期方法警告已解决

解决办法规定react 和 react-dom版本

请求帮助解决此问题
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method ofResizeObserver.

[chenshuai2144]

都是 第三方库的问题，pro 中的代码已经完全迁移，等待社区处理吧

[TnWah]

@chenshuai2144 同样的报错，Pro代码clone后设置为topmenu时会出现，sidemenu正常

[qsk617]

同样，设layout: 'topmenu',就报错。。。sad`

[websmallrabbit]

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

[websmallrabbit]

+1 同样的问题，有解决的大神吗

[TianenPang]

@chenshuai2144
感觉是 @ant-design\pro-layout\lib\TopNavHeader\index.js 渲染 ResizeObserver 组件的时候造成的
太复杂看不懂，等待官方解决吧😂

官方的示例页面怎么就没有报错？示例网站用的是哪个Branch？

[chenshuai2144]

Build之后就没有这个warning了

[TianenPang]

Build之后就没有这个warning了

请问在开发环境如何解决这个报错呢？

[wangtiegang]

强迫症患者，看到 pro 升级就想升级，看到 warning 就浑身难受😂

[afc163]

排查一下是哪里的问题，直接来 PR。