使用React Ant Design+Vite构建导航栏时出现findDOMNode废弃警告

• 升级Ant Design到最新稳定版
  Ant Design团队在后续版本中已经替换了内部的findDOMNode调用，改用标准ref方式。执行以下命令升级：

  npm install antd@latest
  # 或使用yarn
  yarn add antd@latest
  

• 临时关闭React严格模式（不推荐长期使用）
  如果暂时无法升级组件库，可以先关闭React严格模式来消除警告。找到项目入口文件（如main.jsx/main.tsx），移除<StrictMode>标签的包裹：

  // 修改前
  ReactDOM.createRoot(document.getElementById('root')).render(
    <StrictMode>
      <App />
    </StrictMode>,
  );
  
  // 修改后
  ReactDOM.createRoot(document.getElementById('root')).render(
    <App />
  );
  

• 检查自定义代码中的findDOMNode使用
  如果你封装了Menu相关的自定义组件，排查代码中是否存在findDOMNode调用，替换为直接给目标元素绑定ref：

  // 错误用法
  import { findDOMNode } from 'react-dom';
  const domNode = findDOMNode(this.menuRef.current);
  
  // 正确用法
  const menuRef = useRef(null);
  // 直接通过menuRef.current访问DOM节点
  

• 确保Menu配置符合当前版本规范
  AntD 5.x及以上版本推荐使用items属性传递菜单数据，避免旧版的嵌套children写法可能带来的兼容问题：

  const menuItems = [
    { key: 'home', label: '首页' },
    { 
      key: 'docs', 
      label: '文档中心',
      children: [{ key: 'react-docs', label: 'React 教程' }]
    }
  ];
  
  <Menu items={menuItems} />
  

内容的提问来源于stack exchange，提问作者M.EJaz