React+Antd Dropdown触发findDOMNode废弃警告的原因及解决办法

警告产生的原因 #

• React 18 的 StrictMode 会在开发环境严格校验废弃 API 的使用，findDOMNode 是 React 官方明确标记废弃的 API 之一。
• Ant Design 5.x 版本的 Dropdown 组件（或其依赖的 rc-dropdown 等底层组件）内部仍在使用 findDOMNode 来定位弹窗挂载的 DOM 元素，即便升级到 5.4.2，该底层实现尚未完全移除对这个 API 的依赖，因此在 StrictMode 下点击触发 Dropdown 时会弹出警告。

解决方法 #

1. 临时关闭 StrictMode（不推荐长期使用） #

如果只是临时消除警告，可以移除根组件的 <StrictMode> 包裹。修改项目入口文件的渲染代码：

// 原代码
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// 修改后
root.render(<App />);

注意：关闭 StrictMode 会丢失 React 提供的开发环境校验能力，不利于提前发现潜在问题，仅建议临时测试使用。

2. 自定义弹窗挂载容器（推荐） #

通过 Dropdown 的 getPopupContainer 属性指定弹窗的挂载容器，避免组件内部使用 findDOMNode 查找父元素。修改你的 Dropdown 代码：

<Dropdown 
  className="user-menu" 
  menu={{ items }} 
  trigger={['click']} 
  placement="topRight"
  getPopupContainer={() => document.body}
>
  <Avatar size={40}>Me</Avatar>
</Dropdown>

你也可以指定页面中某个具体的 DOM 元素作为容器（比如应用的根节点），这样弹窗会挂载到指定容器下，从根源减少对 findDOMNode 的依赖调用。

3. 等待 Antd 后续版本修复 #

Ant Design 团队已经在逐步迭代移除对 findDOMNode 的依赖，后续正式版本会彻底修复该问题。可以关注 Antd 的官方更新日志，待修复版本发布后升级即可。

4. 手动传递触发元素的 ref（进阶） #

给触发的 Avatar 组件添加 ref，通过 getPopupContainer 指定弹窗挂载到触发元素的父节点下，进一步避免组件内部查找 DOM：

import { useRef } from 'react';

// 组件内部定义 ref
const avatarRef = useRef(null);

// 修改 Dropdown 和 Avatar
<Dropdown 
  className="user-menu" 
  menu={{ items }} 
  trigger={['click']} 
  placement="topRight"
  getPopupContainer={() => avatarRef.current?.parentElement}
>
  <Avatar ref={avatarRef} size={40}>Me</Avatar>
</Dropdown>

内容的提问来源于stack exchange，提问作者spark