Todavía tengo problemas con mecanografiado y reacciono, así que sea condescendiente. Gracias de antemano chicos.
Estoy tratando de transportar una función y un objeto a un componente
Así que aquí está mi componente llamado 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 Y este es mi archivo 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); Como puede ver, transporté con éxito la word objeto en un componente, pero realmente no sé cómo transportar una función también. <WordItem {getWords, ...word}/> o <WordItem getWords={getWords} { ...word}/> no ayuda. Me gusta cómo poner correctamente luego en <WordItem/>
Si desea pasar la variable de word y la función getWords al componente WordItem , debe hacerlo de la siguiente manera:
<WordItem word={word} getWords={getWords} />Luego, debe adaptar los tipos de accesorios de sus componentes para que coincidan con estos accesorios:
const WordItem: FC<{word: IWord, getWords: () => Promise<void>}> = ({word, getWords}) => { ... Estoy usando la desestructuración de objetos en el código anterior para obtener los dos accesorios del parámetro prop , que es equivalente a hacer algo como:
const WordItem: FC<{word: IWord, getWords: () => Promise<void>}> = (props) => { const word = props.word; const getWords = props.getWords; ...