如何在react typescript中作为prop传递函数

Question

我正在用react学习打字，我遇到了问题。我试图将函数作为道具从我的应用程序组件传递给名为DataForm的子组件。

但是我得到了一个错误:

Type '(f: any) =>任何'不能赋值给type '() =>无效"。
参数'f'隐式具有'any'类型。

这是我的代码

App.tsx

import React from 'react';
import './App.css';
import DataForm from './components/form';
export const Data = {
name: "",
country: "",
age:"",
adress:""
}
function App() {

const generateCard = ()=>{
console.log(" generateCard runned")
}
return (
<>
<h1>Human Card Generator</h1>
<DataForm  createCard = { generateCard }/>
</>

);
}
export default App;

组件/form.tsx

import React from 'react'
import { Data } from '../App'
import 'bootstrap';
interface dataFormProps{
createCard: ()=>void
}
export default function DataForm({ createCard = f => f }: dataFormProps){
const dataProceed = (e: any) =>{
Data.name = (document.getElementById('name') as HTMLInputElement).value;
Data.country = (document.getElementById('country') as HTMLInputElement).value;
Data.age = (document.getElementById('age') as HTMLInputElement).value;
Data.adress = (document.getElementById('adress') as HTMLInputElement).value;
createCard();
}

return(
<form onSubmit = { dataProceed }>
<input type="text"   id = "name"  />
<input type="text"  id = "country" />
<input type="number" id="age" />
<input type="text" id = "adress"/>
<button type="submit">stwórz kartę</button>
</form>
)
}

Answer 1

问题不在于传递函数，而在于解构props并提供默认函数:

{ createCard = f => f }: dataFormProps

这段代码表明createCard应该是一个接受参数并返回值的函数。它没有:

createCard: ()=>void

使默认参数匹配签名:

{ createCard = () => {} }: dataFormProps

Answer 2

默认功能createCard的类型应为() => void。所以像这样更新:

DataForm({ createCard = () => {} }: dataFormProps)