我仍然有打字稿的問題并做出反應，所以請居高臨下。提前謝謝你們。
我正在嘗試將函式和物件傳輸到組件
所以這是我的組件命名 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}/>沒有幫助。就像如何正確放入然后放入<WordItem/>
uj5u.com熱心網友回復：
如果要將word變數和getWords函式都傳遞給WordItem組件，則應按如下方式進行：
<WordItem word={word} getWords={getWords} />
然后你需要調整你的組件道具型別以匹配這些道具：
const WordItem: FC<{word: IWord, getWords: () => Promise<void>}> = ({word, getWords}) => {
...
我在上面的代碼中使用物件解構從prop引數中獲取兩個道具，這相當于執行以下操作：
const WordItem: FC<{word: IWord, getWords: () => Promise<void>}> = (props) => {
const word = props.word;
const getWords = props.getWords;
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/332675.html
標籤：javascript 反应 打字稿 成分