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

【问题标题】：How to pass function as a prop in react typescript如何在反应打字稿中将函数作为道具传递
【发布时间】：2021-08-23 15:20:44
【问题描述】：

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

但我得到了一个错误：

类型 '(f: any) => any' 不能分配给类型 '() => void'。
参数 '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>
    )
}

【问题讨论】：

dataFormProps 明确地与您的默认函数不匹配——您必须决定一个函数签名，无论它是什么，并使显式传递的函数和默认函数都匹配该签名。
好吧，您将 createCard 定义为 ()=>void，但随后您将其默认为 f => f。所以 createCard 的默认值不匹配 () => void

标签： javascript reactjs typescript

【解决方案1】：

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

{ createCard = f => f }: dataFormProps

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

createCard: ()=>void

使默认参数匹配签名：

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

【讨论】：

【解决方案2】：

默认函数createCard 应该具有类型() => void。所以只需像这样更新：

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

【讨论】：