如何將useState設置狀態函數傳遞給打字稿中的子組件？

Question

我最近開始使用打字稿，但在傳遞使用狀態設置器函數時遇到了麻煩，

我的父組件是這樣的：

const [word, setword] = useState('run')

在孩子中，我正在路過：

<Child word={word} setword={setword}/>

孩子有這個：

    interface Props {
      word: string
      
      setword: React.Dispatch<React.SetStateAction<string>>;
    }
    const VoicetoText: React.FC<Props> = (word, setword) => {
    return (
{word}
<button onClick={()=>setword('hey buddy')} ><button/>
    )}

我不斷收到錯誤消息：

Answer 1

您忘記添加花括號

const VoicetoText: React.FC<Props> = (word, setword) 

要么使用道具，要么解構道具

const VoicetoText: React.FC<Props> = (props) 
props.setWord

解構

const VoicetoText: React.FC<Props> = ({word, setword}) 

Answer 2

只需使用setword: (word: string) => void作為道具類型。

interface Props {
  word: string      
  setword: (word: string) => void;
}

Answer 3

我建議不要讓你的生活變得更艱難，而是使用以下方法：

const Child = ({setWord}: {setWord: (arg0: string}) => void) => {
  // () => setWord("word") is jsut for sample sake, you should avoid using arrow function calls inside event handleres like this
  return <button onClick={() => setWord("word")}>Click me</button>
}

const Parent = () => {

  const [word, setWord] = useState(false);

  return <Child propName={setWord}/>
}