React转TypeScript时传递自定义Props给组件报类型错误求助

错误原因 #

TypeScript对React组件的props有严格的类型校验，你的EventForm组件没有声明自定义props的类型，TS默认只识别React内置属性（比如className、style），所以不认你传递的onAddEvent或onSaveEventData这类自定义回调属性。

具体解决步骤 #

1. 定义表单数据和组件Props的类型

先明确表单收集的数据结构，再给EventForm组件定义接收的props类型：

// 定义表单收集的事件数据结构
interface EventData {
  title: string;
  date: string;
  description?: string; // 可选字段根据你的需求调整
}

// 定义EventForm组件的Props类型
interface EventFormProps {
  // 根据你实际使用的回调名称选择对应定义
  onSaveEventData: (enteredEventData: EventData) => void;
  // 如果用onAddEvent则写成：onAddEvent: (event: EventData) => Promise<void>;
}

2. 给EventForm组件绑定Props类型

修改EventForm组件的定义，让它接收上面定义的Props类型：

const EventForm = (props: EventFormProps) => {
  // 组件内部逻辑：收集表单输入并触发回调
  const submitHandler = (e: React.FormEvent) => {
    e.preventDefault();
    // 示例：收集表单输入数据
    const enteredData: EventData = {
      title: (e.target as HTMLFormElement).title.value,
      date: (e.target as HTMLFormElement).date.value
    };
    // 调用父组件传递的回调函数
    props.onSaveEventData(enteredData);
  };

  return (
    <form onSubmit={submitHandler}>
      <input type="text" name="title" placeholder="事件标题" />
      <input type="date" name="date" />
      <button type="submit">创建事件</button>
    </form>
  );
};

export default EventForm;

3. 父组件中正确传递回调

确保父组件的回调函数参数类型和定义的EventData匹配，避免使用any：

// 父组件中的回调函数，参数类型与EventData一致
const saveEventDataHandler = (enteredEventData: EventData) => {
  // 这里编写存入数据库的逻辑，比如调用后端API
  console.log("准备存入数据库的事件数据:", enteredEventData);
};

// 父组件渲染部分
return (
  <div className='new-event'>
    <EventForm onSaveEventData={saveEventDataHandler}/>
  </div>
);

关键提醒 #

• 不要用any代替具体类型，TypeScript的核心价值就是类型校验，明确类型能帮你提前发现潜在错误。
• 如果组件需要接收多个自定义props，全部要在EventFormProps接口中声明，TS会自动校验传递的属性是否符合类型要求。

内容的提问来源于stack exchange，提问作者Sonita Ung