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

Question

我在打字稿和反应上仍然有问题所以请居高临下。提前谢谢你们。

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

所以这是我的组件 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/>

Answer 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;
...

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

How to transport a function and an object to a functional component in react

javascript

components

typescript

reactjs