React 18项目HRnet中自定义Dropdown插件触发ref警告问题咨询

我在React 18项目HRnet中使用了自行开发并发布至NPM的Dropdown插件，该插件采用Rollup打包，通过状态提升传递值。插件自身开发环境无任何警告，但在HRnet应用的开发环境中，bundle.js始终触发如下警告：

'Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?'
生产环境无此问题，注释插件后警告消失，无法理解问题原因。

原因分析 #

你的Dropdown是普通函数组件，而HRnet项目的表单组件（如AddUserForm）中，要么是你直接给Dropdown传递了ref属性，要么是你使用的表单库（比如Formik、React Hook Form）在内部尝试给表单控件组件附加ref。普通函数组件本身不支持接收ref，只有类组件或用React.forwardRef()包装的函数组件才能接收并传递ref，这就是警告触发的核心原因。生产环境因为警告被默认压制，所以不会显示，但开发环境会明确提示。

解决方法 #

1. 修改Dropdown插件，用React.forwardRef()包装组件 #

调整插件核心代码，用forwardRef包裹组件，并将ref传递给内部的原生DOM元素（如下拉选择框select）：

import React, { forwardRef } from 'react';

// 定义组件Props类型
type DropdownProps = {
  options: { label: string; value: string }[];
  value: string;
  onChange: (value: string) => void;
  // 其他自定义Props
};

const Dropdown = forwardRef<HTMLSelectElement, DropdownProps>((props, ref) => {
  const { options, value, onChange, ...rest } = props;

  return (
    <select
      ref={ref}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      {...rest}
    >
      {options.map((option) => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
});

// 设置displayName，避免React DevTools显示异常
Dropdown.displayName = 'Dropdown';

export default Dropdown;

2. 检查HRnet项目中Dropdown的使用逻辑 #

• 如果是你主动给Dropdown传了ref，确认是否有必要：若只是为了获取内部DOM元素，修改插件支持forwardRef即可解决；若需要调用组件内部方法，可结合useImperativeHandle暴露指定方法。
• 如果是表单库自动添加的ref，确保插件修改后，ref能正确传递到原生表单元素，表单库就能正常获取控件引用。

3. 验证Rollup打包配置 #

确保Rollup的React相关插件（如@rollup/plugin-react）配置正确，没有遗漏对forwardRef的处理，打包后的代码能完整保留React的ref相关逻辑。

内容的提问来源于stack exchange，提问作者HatClic.fr