如何在反应打字稿中将函数作为道具传递

Question

我正在用 React 学习打字稿，但出现了问题。我尝试将函数作为 prop 从我的 App 组件传递到名为 DataForm 的子组件。

\n

但我得到一个错误：

\n

\n

类型“(f:any)=>any”不可分配给类型“()=>void”。
\n参数“f”隐式具有“any”类型。

\n

\n

这是我的代码

\n

应用程序.tsx\n

\r\n

\r\n

import React from \'react\';\nimport \'./App.css\';\nimport DataForm from \'./components/form\';\n\nexport const Data = {\n  name: "",\n  country: "",\n  age:"",\n  adress:""\n}\n\nfunction App() {\n\n\n  const generateCard = ()=>{\n    console.log(" generateCard runned")\n  }\n  return (\n    <>\n      <h1>Human Card Generator</h1>\n      <DataForm  createCard = { generateCard }/>\n    </>\n    \n\n  );\n}\n\nexport default App;

\r\n

\r\n

\r\n

\n

组件/form.tsx

\n

\r\n

\r\n

import React from \'react\'\nimport { Data } from \'../App\'\nimport \'bootstrap\';\n\ninterface dataFormProps{\n    createCard: ()=>void\n}\n\nexport default function DataForm({ createCard = f => f }: dataFormProps){\n\n    const dataProceed = (e: any) =>{\n        Data.name = (document.getElementById(\'name\') as HTMLInputElement).value;\n        Data.country = (document.getElementById(\'country\') as HTMLInputElement).value;\n        Data.age = (document.getElementById(\'age\') as HTMLInputElement).value;\n        Data.adress = (document.getElementById(\'adress\') as HTMLInputElement).value;\n        createCard();\n    }\n\n\n    return(\n        <form onSubmit = { dataProceed }>\n            <input type="text"   id = "name"  />\n            <input type="text"  id = "country" />\n            <input type="number" id="age" />\n            <input type="text" id = "adress"/>\n            <button type="submit">stw\xc3\xb3rz kart\xc4\x99</button>\n        </form>\n    )\n}

\r\n

\r\n

\r\n

\n

Answer 1

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

{ createCard = f => f }: dataFormProps

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

createCard: ()=>void

使默认参数与签名匹配：

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