React，使用 TypeScript 將狀態設置器（useState）傳遞給子組件

Question

將 useState setter 函數傳遞給子組件時，我很難弄清楚類型。

我試圖簡化為下面的基本代碼：

父母

function Parent() {    
  const [name, setName] = useState("Structured")
  ..
  return (
    <>
      <Child setName={setName}/>
    </>

孩子

import { Dispatch, SetStateAction } from "react";

function Child(setName: Dispatch<SetStateAction<string>>){
  return (
    <>
      <Input onChange={
        (value)=>{
          setName(value: SetStateAction<string>)
          console.log(value)
        }
      </Input>
    </>

在父母身上，我收到以下錯誤：

類型“{ setName: Dispatch<SetStateAction>; }”不可分配給類型“IntrinsicAttributes & Dispatch<SetStateAction”屬性“setName”在類型“IntrinsicAttributes & Dispatch<SetStateAction>”上不存在。

關於我得到的孩子：

“string | string[]”類型的參數不可分配給“SetStateAction”類型的參數 類型“string[]”不可分配給“SetStateAction”類型

Answer 1

應該

function Child({ setName } : { setName: Dispatch<SetStateAction<string>>}){

Child組件接受 props，它是一個對象，而不僅僅是setName值

Answer 2

如果你想要一個完整的 React 組件，你可以在 React 的FC的幫助下鍵入你的 React 功能組件。 如果不是，例如你不能訪問children表單props ，因為它不被稱為 React 組件。

對於onChange部分，我現在正在做演員，因為我不知道這個Input的樣子。 你能展示一下嗎？

import { Dispatch, SetStateAction, FC} from "react";

interface ChildPropsType {
  setName: Dispatch<SetStateAction<string>>
}
/* 
   I'm using an interface for convenience, you can 
   replace it with { setName: Dispatch<SetStateAction<string>> }
*/
const Child : FC<ChildPropsType> = ({setName}) => {
  return (
    <>
      <Input onChange={
        (value as string)=>{
          setName(value);
        }
      </Input>
    </>
  )
}
export default Child;