You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 

1.7 KiB

Form组件导出冲突修复

问题描述

在重构Form组件时出现了导出冲突错误:

Multiple exports with the same name "FormItem"

问题原因

form.tsx文件中,我们既从form-item.tsx导出了新的FormItem组件,又在文件内部定义了原有的FormItem组件,导致了重复导出。

修复方案

1. 重命名原有组件

将原有的FormItem重命名为FormItemBase,避免与新的FormItem组件冲突:

// 修复前
const FormItem = React.forwardRef<...>

// 修复后
const FormItemBase = React.forwardRef<...>

2. 更新导出

更新导出列表,移除冲突的FormItem导出:

export {
  useFormField,
  Form,
  FormItemBase, // 重命名后的组件
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
};

3. 保持新组件导出

保持从form-item.tsx导出的新组件:

export { FormContainer, FormItem, FormInfo } from "./form-item";
export type { FormLayout, FormSpacing } from "./form-item";

修复结果

  • 解决了重复导出错误
  • 新的FormItem组件正常工作
  • 原有的基础组件保持可用
  • CreateFolderModal组件正常运行

技术说明

FormItemBase是基于react-hook-form的基础表单项组件,主要用于内部实现。而新的FormItem是我们重构后的灵活表单项组件,提供了更好的API和布局支持。

两个组件各司其职:

  • FormItemBase: 用于react-hook-form的内部实现
  • FormItem: 用于业务代码的表单构建

验证

通过TypeScript编译检查和运行时测试,确认修复成功:

  • 无编译错误
  • CreateFolderModal组件正常显示和交互
  • 新的Form组件系统工作正常