如何在反應中將功能傳輸到功能組件

我在反應和打字稿方面有點新，并且在將函式從檔案傳輸App.tsx到名為WordAddingForm.tsx THANKS IN ADVANCE 的功能組件時遇到了一些問題！

所以這是我的App.tsx檔案：

import React, {FC, useState} from 'react';
import WordAddingForm from './components/WordAddingForm';
import {observer} from "mobx-react-lite";
import WordService from "./services/WordService"

const App: FC = () => {

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

  return (
    <div>
      <div><WordAddingForm/></div>
    </div>
  )
}

export default observer(App);

我需要將功能傳輸getWords到組件這是我的WordAddingForm.tsx檔案：

import React, {FC, useContext, useState} from 'react';
import {Context} from "../index";
import {observer} from "mobx-react-lite";
import WordService from '../services/WordService';

const WordAddingForm: FC = () => {

    const [word, setWord] = useState<string>('')
    const [wordT, setWordT] = useState<string>('')
    const [instance, setInstance] = useState<string>('')
    const [instanceT, setInstanceT] = useState<string>('')
    const {store} = useContext(Context)

    function clear():void {
        setWord('')
        setWordT('')
        setInstance('')
        setInstanceT('')
    }

    async function createWord(word:string, wordT:string, instance:string, instanceT:string) {
        try {
          const response = await store.createWord(word, wordT, instance, instanceT)
          console.log(response)
          clear()
        } catch (e) {
          console.log(e)
        }
      }

    return (
        <div>
            <input
            onChange={e => setWord(e.target.value)}
            value={word}
            type="text"
            placeholder="word"
            />
            <input
            onChange={e => setWordT(e.target.value)}
            value={wordT}
            type="text"
            placeholder="word translation"
            />
            <input
            onChange={e => setInstance(e.target.value)}
            value={instance}
            type="text"
            placeholder="instance of using this word"
            />
            <input
            onChange={e => setInstanceT(e.target.value)}
            value={instanceT}
            type="text"
            placeholder="instance translation"
            />
            <button
            onClick={() => {
                createWord(word, wordT, instance, instanceT)
                clear()
                }}>
                add word  
            </button>
        </div>
    )
}

export default observer(WordAddingForm)

而且我需要傳輸功能getWords以<WordAddingForm/>在此組件中使用它并在將新單詞添加到資料庫后再次更新單詞串列喜歡<WordAddingForm props={getWords}/>或<WordAddingForm {getWords}/>沒有幫助

uj5u.com熱心網友回復：

<WordAddingForm getWords={getWords} />

這就是您將其傳遞給組件的方式。使用 inside 時WordAddingForm，必須通過引數接收 props 物件：

interface Props {
  getWords: () => Promise<any>
}
const WordAddingForm: FC<Props> = (props) => {
// use your function as props.getWords()
}

標籤：javascript 反应 打字稿 反应钩子 成分

上一篇：在API呼叫和更改狀態后，React不會重新渲染

下一篇：將div移動到導航欄的右側