有没有一种方法可以传递一个泛型表单类型并使用它来显示表单？

// 定义泛型表单类型
interface Form<T> {
  fields: Array<Field<T>>;
}

// 定义表单字段类型
interface Field<T> {
  name: string;
  label: string;
  value: T;
}

// 定义文本输入字段
interface TextInput {
  type: 'text';
  placeholder: string;
}

// 定义数字输入字段
interface NumberInput {
  type: 'number';
  min: number;
  max: number;
}

// 定义表单组件
function FormComponent<T>(props: Form<T>) {
  return (
    <form>
      {props.fields.map((field) => (
        <div key={field.name}>
          <label>{field.label}</label>
          {field.value}
        </div>
      ))}
    </form>
  );
}

// 使用泛型表单组件
const textForm: Form<TextInput> = {
  fields: [
    { name: 'name', label: 'Name', value: { type: 'text', placeholder: 'Enter your name' } },
    { name: 'email', label: 'Email', value: { type: 'text', placeholder: 'Enter your email' } },
  ],
};

const numberForm: Form<NumberInput> = {
  fields: [
    { name: 'age', label: 'Age', value: { type: 'number', min: 18, max: 99 } },
    { name: 'quantity', label: 'Quantity', value: { type: 'number', min: 1, max: 10 } },
  ],
};

ReactDOM.render(
  <>
    <FormComponent {...textForm} />
    <FormComponent {...numberForm} />
  </>,
  document.getElementById('root')
);