如何設定“a React useState 函式”的道具型別
// 父組件.tsx
import { useState } from "react"
import ChildComponent "./ChildComponent"
const ParentComponent = () => {
const [prompt, setPrompt] = useState<boolean>(false)
return <ChildComponent setPrompt={setPrompt}/>
}
// ChildComponent.tsx
interface ChildComponentProps {
setPrompt: Function // ? WORKED but inaccurate!
setPrompt: (value: boolean) => void // kinda WORKED thanks @acemarke!
setPrompt: typeof React.useState // ?? DOESNT WORK!!!
}
const ChildComponent = (props: ChildComponentProps) => {
return <button onClick={() => props.setPrompt(false)}>Button</button>
}
uj5u.com熱心網友回復：
如果您將滑鼠懸停setPrompt在代碼編輯器中，您應該會看到型別：
Dispatch<SetStateAction<boolean>>
這些型別來自 React 內部。所以你要么想匯入它們：
import type { Dispatch, SetStateAction } from 'react'
Dispatch<SetStateAction<boolean>>
或者只是從React命名空間中使用它們。
React.Dispatch<React.SetStateAction<boolean>>
這使得ChildComponentProps類似：
interface ChildComponentProps {
setPrompt: React.Dispatch<React.SetStateAction<boolean>>
}
沒有型別錯誤的游樂場
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/484016.html
上一篇：如何獲取包含破折號的所有鍵？