[英]How to transport a function and an object to a functional component in react
我仍然有打字稿的问题并做出反应,所以请居高临下。 提前谢谢你们。
我正在尝试将函数和对象传输到组件
所以这是我名为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/>
如果要将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;
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.