當(dāng)我們使用 React 開發(fā)項(xiàng)目時(shí)，最常用的組件應(yīng)該是組件，組件分為功能組件和類組件，我們可以按如下方式定義它們：

　　定義功能組件

　　定義類組件

　　在本文中，我將介紹使用TypeScript定義功能組件的4種方法，并且在使用過(guò)程中需要注意幾個(gè)問(wèn)題。

　　· 如何使用類型腳本

　　1 定義功能組件。使用反應(yīng)

　　2.使用 JSX。要件

　　 3.直接

　　4.使用反應(yīng)道具與孩子

　　·提示

　　°1.功能組件不能返回布爾值

　　 2.無(wú)法使用 Array.fill() 填充組件

　　3.支持通用組件

　　·引用

　　如何使用類型腳本定義功能組件

　　功能組件通常采用一個(gè)參數(shù)并返回 JSX 元素或 。propsnull

　　當(dāng)我們需要使用TypeScript來(lái)定義功能組件時(shí)，我們有4種方法，每種方法都有自己的優(yōu)點(diǎn)和缺點(diǎn)，具體取決于具體情況。

　　1.使用反應(yīng)

　　由于 React 不是使用 TypeScript 開發(fā)的，因此它使用社區(qū)開發(fā)的包提供的類型，該包具有一個(gè)泛型類型，允許我們將類型添加到功能組件中。@type/reactFC

　　這是 的簡(jiǎn)寫。React.FCReact.FunctionComponent

　　當(dāng)組件包含子元素時(shí)，類型腳本將提示一條警告：

　　使用反應(yīng)

　　提示警告內(nèi)容：

　　這現(xiàn)已棄用。有關(guān)具體討論，請(qǐng)參閱以下兩個(gè)鏈接：

　　從打字機(jī)模板 #8177 中刪除 React.FC;

　　類型腳本 + 反應(yīng)： 為什么我不使用反應(yīng)FC。

　　阿拉伯?dāng)?shù)字。使用 JSX。元素

　　使用類型作為功能組件的返回值類型。當(dāng)組件的返回值不是類型時(shí)，類型腳本將提示錯(cuò)誤。JSX.ElementJSX.Element

　　使用 JSX。元素

　　3.直接定義完整類型

　　由于組件包含子元素，它將隱式傳遞一個(gè)屬性，導(dǎo)致定義的參數(shù)類型出現(xiàn)錯(cuò)誤，因此我們可以直接定義一個(gè)完整的參數(shù)接口，包括屬性的類型：React children children

　　直接定義完整類型

　　4.使用反應(yīng)道具與孩子

　　第三種方法每次手動(dòng)編寫屬性類型比較麻煩，然后我們可以使用類型，它本身封裝了類型聲明：children React.PropsWithChildren children

　　因此，使用類型來(lái)定義功能組件，而不必處理 ：React.PropsWithChildren children

　　使用反應(yīng)道具與孩子

　　技巧

　　 1.功能組件不能返回布爾值

　　當(dāng)我們?cè)诤瘮?shù)組件中使用條件語(yǔ)句時(shí)，如果 React 返回非 JSX 元素或非空值，它將引發(fā)錯(cuò)誤：

　　功能組件不能返回布爾值

　　正確的方法是讓函數(shù)組件返回有效的 JSX 元素或 null：

　　當(dāng)然，你不能這樣寫，當(dāng)屬性是 時(shí)，它也會(huì)出錯(cuò)：useRenderfalse

　　 阿拉伯?dāng)?shù)字。無(wú)法使用陣列填充組件

　　當(dāng)我們的組件直接返回 結(jié)果時(shí)，類型腳本會(huì)引發(fā)錯(cuò)誤。Array.fill()

　　無(wú)法使用陣列填充組件

　　提示以下內(nèi)容：

　　為了解決這個(gè)問(wèn)題，我們可以定義函數(shù)的返回類型：

　　3.支持通用組件

　　當(dāng)使用TypeScript開發(fā) React 功能組件時(shí)，您還可以使用泛型來(lái)約束和聲明泛型組件，這可以使我們的組件更加靈活。

　　它可以像這樣使用：

　　支持通用組件

　　更高級(jí)的用法在通用組件一章中進(jìn)行了介紹：

　　通用組件

　　引用

　　反應(yīng)

　　反應(yīng)類型腳本備忘單