Use a ref instead of findDOMNode

[mrtnbroder]

findDOMNode is deprecated and will cause issues in the future. I've just experimented with the new React.lazy() api and I got an exception right here:

https://github.com/react-component/menu/blob/master/src/MenuItem.jsx#L54-L56

When I was asynchronously loading a component into my page. Instead of using findDOMNode we should be using a ref.

[boqiaok]

使用React.lazy api的确会触发问题 有计划替换fondDOMNode吗

[mrtnbroder]

what?

[sylann]

The priority of this issue should be re considered. See https://github.com/ant-design/ant-design/issues/26136

[yoyo837]

Please help to check rc-menu@9

[michaeljwright]

Still issues with StrictMode around NextJs using Antd menu, seems to go away if the items[] don't have label property.

next-dev.js?3515:20 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Trigger 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
    at li
    at InternalItem (webpack-internal:///./node_modules/rc-overflow/es/Item.js:21:25)
    at InternalRawItem (webpack-internal:///./node_modules/rc-overflow/es/RawItem.js:21:52)
    at LegacyMenuItem (webpack-internal:///./node_modules/rc-menu/es/MenuItem.js:60:90)
    at InternalMenuItem (webpack-internal:///./node_modules/rc-menu/es/MenuItem.js:87:21)
    at MenuItem (webpack-internal:///./node_modules/rc-menu/es/MenuItem.js:210:24)
    at Trigger (webpack-internal:///./node_modules/rc-trigger/es/index.js:78:92)
    at Tooltip (webpack-internal:///./node_modules/rc-tooltip/es/Tooltip.js:22:32)
    at eval (webpack-internal:///./node_modules/antd/es/tooltip/index.js:90:16)
    at MenuItem (webpack-internal:///./node_modules/antd/es/menu/MenuItem.js:25:5)
    at ul
    at Overflow (webpack-internal:///./node_modules/rc-overflow/es/Overflow.js:40:32)
    at InheritableContextProvider (webpack-internal:///./node_modules/rc-menu/es/context/MenuContext.js:30:23)
    at eval (webpack-internal:///./node_modules/rc-menu/es/Menu.js:76:27)
    at eval (webpack-internal:///./node_modules/antd/es/menu/menu.js:43:55)
    at eval (webpack-internal:///./node_modules/antd/es/menu/index.js:19:64)
    at div
    at aside
    at eval (webpack-internal:///./node_modules/antd/es/layout/Sider.js:53:18)
    at MenuItems (webpack-internal:///./components/Menu/MenuItems.jsx:29:100)
    at section
    at eval (webpack-internal:///./node_modules/antd/es/layout/layout.js:74:42)
    at Layout
    at div