React TypeScript中如何将函数作为prop传递及类型不匹配报错解决

• 你在dataFormProps接口中为createCard定义的类型是() => void：无入参、无返回值的函数
• 你给createCard设置的默认值是f => f：这是一个接收1个参数、返回该参数的函数，类型为(f: any) => any，和接口定义的类型不匹配
• 同时默认值函数的参数f没有显式声明类型，触发了参数隐式为any的报错

根据你的需求二选一即可：

方案1：createCard为必填prop（推荐） #

直接去掉默认值的赋值即可，修改form.tsx中组件的参数定义行：

// 修改前
export default function DataForm({ createCard = f => f }: dataFormProps){
// 修改后
export default function DataForm({ createCard }: dataFormProps){

因为你在父组件已经明确传递了generateCard函数，不需要额外设置默认值。

方案2：保留默认值 #

将默认值替换为符合() => void类型的空函数：

// 修改前
export default function DataForm({ createCard = f => f }: dataFormProps){
// 修改后
export default function DataForm({ createCard = () => {} }: dataFormProps){

空函数没有入参也没有返回值，和你定义的接口类型完全匹配，两个报错都会直接消失。

• 提交事件的参数e可以替换类型为React.FormEvent<HTMLFormElement>，避免使用any类型
• 不要直接操作DOM拿表单值，建议改用React受控组件或者useRef获取输入框内容
• 全局的Data对象不会触发组件渲染更新，建议改用useState管理表单数据

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