React/Next.js中shadcn表单组件代码拆分方法咨询

1. 按字段组拆分独立组件 #

先梳理表单内的关联字段，按业务逻辑分组（比如「用户基础信息」「联系方式」「账单地址」），每组单独封装成子组件，只负责自身字段的渲染与局部交互：

// components/forms/UserInfoSection.tsx
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

type Props = {
  firstName: string
  lastName: string
  onChange: (field: 'firstName' | 'lastName', value: string) => void
}

export default function UserInfoSection({ firstName, lastName, onChange }: Props) {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="firstName">First Name</Label>
        <Input
          id="firstName"
          value={firstName}
          onChange={(e) => onChange('firstName', e.target.value)}
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="lastName">Last Name</Label>
        <Input
          id="lastName"
          value={lastName}
          onChange={(e) => onChange('lastName', e.target.value)}
        />
      </div>
    </div>
  )
}

2. 提取通用表单原子组件 #

把重复出现的表单元素（带标签的输入框、带错误提示的选择器等）封装成通用组件，减少冗余代码：

// components/forms/FormInput.tsx
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { ErrorMessage } from '@/components/ui/error-message'

type Props = {
  label: string
  id: string
  value: string
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  error?: string
}

export default function FormInput({ label, id, value, onChange, error }: Props) {
  return (
    <div className="space-y-2">
      <Label htmlFor={id}>{label}</Label>
      <Input 
        id={id} 
        value={value} 
        onChange={onChange} 
        className={error ? 'border-red-500' : ''} 
      />
      {error && <ErrorMessage>{error}</ErrorMessage>}
    </div>
  )
}

之后主表单里只需调用 <FormInput label="First Name" id="firstName" ... /> 即可。

3. 抽离表单状态与业务逻辑 #

如果使用React Hook Form/Zod这类工具，把校验规则、提交逻辑、状态管理抽离到自定义Hook中，主组件只负责渲染：

// hooks/useFormHandler.ts
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'

const FormSchema = z.object({
  firstName: z.string().min(1, 'First name is required'),
  lastName: z.string().min(1, 'Last name is required'),
  // 其他字段校验规则
})

type FormValues = z.infer<typeof FormSchema>

export function useFormHandler() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      firstName: '',
      lastName: '',
      // 表单默认值
    }
  })

  const onSubmit = handleSubmit((data) => {
    // 提交逻辑：调用API、数据处理等
    console.log(data)
  })

  return { register, errors, onSubmit }
}

4. 拆分操作类组件 #

把表单的提交、重置按钮等操作元素单独封装，主组件只负责传递回调：

// components/forms/FormActions.tsx
import { Button } from '@/components/ui/button'

type Props = {
  onSubmit: () => void
  onReset: () => void
}

export default function FormActions({ onSubmit, onReset }: Props) {
  return (
    <div className="flex gap-4 mt-8">
      <Button type="submit" onClick={onSubmit}>Submit</Button>
      <Button type="button" variant="secondary" onClick={onReset}>Reset</Button>
    </div>
  )
}

5. 按业务分支拆分 #

如果表单存在条件渲染（比如不同用户类型显示不同字段），把分支逻辑拆成独立组件，主组件做条件判断：

// 主表单组件内的渲染逻辑
{userType === 'admin' && <AdminFields register={register} errors={errors} />}
{userType === 'regular' && <RegularUserFields register={register} errors={errors} />}

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