React严格模式下Semantic-UI-React Dimmer的findDOMNode警告问题解决

警告根源 #

虽然Semantic-UI-React的Dimmer组件相关的findDOMNode问题早年就有修复记录，但你使用的2.1.4版本中，组件内部（或是它依赖的子组件，比如过渡动画模块）仍存在findDOMNode的调用。React 18的StrictMode对废弃API的检测更严格，且会通过双重渲染机制暴露这类潜在问题，因此触发了该警告。

解决方法（除关闭StrictMode外） #

• 升级Semantic-UI-React到最新稳定版：后续版本的Semantic-UI-React已经针对React 18 StrictMode做了适配，彻底移除了findDOMNode的使用，升级后警告会自动消失。
• 手动封装Dimmer组件传递ref：如果暂时无法升级，可以自己封装一层Dimmer，利用组件提供的innerRef属性，把ref直接绑定到底层DOM元素，规避内部的findDOMNode调用。示例代码如下：

import React, { forwardRef } from "react";
import { Dimmer as SUIDimmer } from "semantic-ui-react";

const Dimmer = forwardRef((props, ref) => {
  return <SUIDimmer {...props} innerRef={ref} />;
});

// 使用封装后的组件
const App = () => (
  <React.StrictMode>
    <Dimmer>Hey</Dimmer>
  </React.StrictMode>
);

• 用patch-package打临时补丁：找到semantic-ui-react包内Dimmer组件使用findDOMNode的代码片段，替换为直接的ref引用逻辑，通过patch-package工具生成补丁，后续安装依赖时会自动应用该修改。

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