React+TypeScript开发中如何向函数式组件同时传递对象和函数

步骤1：修改WordItem组件的Props类型定义 #

你需要先扩展原有IWord类型，加入getWords函数的类型声明，调整组件的入参定义：

import React, {FC, useContext} from "react"
import { IWord } from "../../../models/IWord"
import {Context} from "../../../index";

// 扩展Props类型
interface WordItemProps extends IWord {
  // 声明getWords函数的类型
  getWords: () => Promise<void>
}

const WordItem: FC<WordItemProps> = (props) => {
    const {store} = useContext(Context)
    // 可以按需解构使用传入的属性和函数
    const { id, word, wordT, instance, instanceT, getWords } = props

    async function deleteWord () {
        await store.deleteWord(id)
        // 比如删除完成后调用刷新列表
        await getWords()
    }

    return (
        <div key={id}>
            <div>
                <div>{word}</div>
                <div>{wordT}</div>
            </div>
            <div>
                <div>{instance}</div>
                <div>{instanceT}</div>
                <button onClick={() => deleteWord()}>delete</button>
            </div>
        </div>
    )
}

export default WordItem

步骤2：修正父组件传参写法 #

你之前的传参写法多了不必要的大括号，直接按如下格式传递即可，属性传值和对象展开可以同时使用，展开运算符不需要额外包裹大括号：

{words.reverse().map(word => <WordItem getWords={getWords} {...word}/>)}

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