如何在反应中将功能和对象传输到功能组件

Posted 2023-02-23

【中文标题】如何在反应中将功能和对象传输到功能组件

【英文标题】：How to transport a function and an object to a functional component in react

【发布时间】：2021-12-09 05:05:18

【问题描述】：

我仍然对打字稿有问题并做出反应，所以请居高临下。提前谢谢你们。

我正在尝试将函数和对象传输到组件

这是我的组件，名为WordItem

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

const WordItem: FC<IWord> = (word) => 

    const store = useContext(Context)

    async function deleteWord () 
        await store.deleteWord(word.id)
    

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


export default WordItem

这是我的App.tsx 文件：

import React, FC, useContext, useState from 'react';
import Context from "./index";
import observer from "mobx-react-lite";
import IUser from "./models/IUser";
import WordService from "./services/WordService"
import  IWord  from './models/IWord';
import WordItem from './components/UI/word/WordItem';

const App: FC = () => 

  const store = useContext(Context)
  const [users, setUsers] = useState<IUser[]>([])
  const [words, setWords] = useState<IWord[]>([])
  
  async function getWords() 
    try 
      const response = await WordService.fetchWords()
      setWords(response.data)
     catch (e) 
      console.log(e)
    
  

    return (
      <div>

        <button onClick=getWords>Get words</button>
        words.reverse().map(word => <WordItem ...word/>)
        words.length == 0? 'there is no words': ''

      </div>
    )

  


export default observer(App);

如您所见，我在组件中成功传输了对象word，但我真的不知道如何传输函数。 <WordItem getWords, ...word/> 或 <WordItem getWords=getWords ...word/> 没有帮助。喜欢如何正确地把 then 放入<WordItem/>

【参考方案1】：

如果你想将word 变量和getWords 函数都传递给WordItem 组件，你应该这样做：

<WordItem word=word getWords=getWords />

然后你需要调整你的组件道具类型来匹配这些道具：

const WordItem: FC<word: IWord, getWords: () => Promise<void>> = (word, getWords) => 
...

我在上面的代码中使用object destructuring 来从prop 参数中获取两个道具，这相当于执行以下操作：

const WordItem: FC<word: IWord, getWords: () => Promise<void>> = (props) => 
  const word = props.word;
  const getWords = props.getWords;
...