TypeScript校验ReactElement类型 实现Form组件子元素类型限制

你当前的实现存在两个核心问题：

1. TS的HTMLInputElement/HTMLButtonElement是DOM实例的类型，并非React元素的类型，且TS类型仅在编译阶段生效，无法在运行时用来区分子元素类别
2. 你在Form组件的返回值中写死了输入框和按钮，传入的children没有被渲染，需要替换为{children}才能正常工作

1. 类型定义修正（编译时校验） #

首先定义自定义输入组件的Props类型，再限定Form可接收的子元素类型，从编译层面拦截非法子元素：

import { Children, ReactElement, SyntheticEvent, isValidElement } from 'react';

// 你的自定义Input组件的Props类型，根据实际业务调整
interface InputComponentProps {
  name: string;
  value: string;
  onChange?: (value: string) => void;
}

// 自定义Input组件实现示例
function InputComponent(props: InputComponentProps) {
  return <input {...props} />
}

// Form支持的合法子元素类型：自定义InputComponent 或 原生button
type FormValidChild = 
  | ReactElement<InputComponentProps, typeof InputComponent>
  | ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>, 'button'>;

interface FormProps {
  children: FormValidChild | FormValidChild[];
}

2. 运行时区分+值收集逻辑 #

React元素的type字段是区分子元素类别的核心标识：

• 原生DOM元素的type是标签名字符串，比如'button'对应原生按钮
• 自定义组件的type是组件函数/类本身的引用，直接和InputComponent做相等判断即可识别

function Form({ children }: FormProps) {
  const handleSubmit = (event: SyntheticEvent) => {
    event.preventDefault();
    const formResult: Record<string, string> = {};

    Children.forEach(children, (child) => {
      // 过滤非合法React元素（比如文本、null、undefined等）
      if (!isValidElement(child)) {
        if (process.env.NODE_ENV === 'development') {
          console.warn('Form仅接收InputComponent和原生button作为子元素');
        }
        return;
      }

      // 识别自定义InputComponent，收集name和value
      if (child.type === InputComponent) {
        const { name, value } = child.props as InputComponentProps;
        if (name) {
          formResult[name] = value;
        }
        return;
      }

      // 识别原生button，不需要收集值直接跳过
      if (child.type === 'button') {
        return;
      }

      // 其余非法子元素开发环境提示
      if (process.env.NODE_ENV === 'development') {
        console.error('检测到非法子元素，Form仅支持InputComponent和原生button');
      }
    });

    // 最终输出你需要的结构：{myInput1: "abc", myInput2: "def"}
    console.log(formResult);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 渲染传入的children，替换原来写死的内容 */}
      {children}
    </form>
  );
}

扩展说明 #

如果你的InputComponent是内部维护输入状态、没有将value透传到外层props，直接遍历children取props的方式拿不到实时输入值。这种场景更推荐用React Context实现：

• Form组件提供表单状态Context
• InputComponent挂载时将自己的name注册到Context，输入变化时实时同步值到Context
• 提交时直接从Context中读取所有字段值，可靠性比遍历children更高

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