如何將React功能組件與類型腳本結(jié)合使用

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

　　定義功能組件

　　定義類組件

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

　　· 如何使用類型腳本

　　1 定義功能組件。使用反應

　　2.使用 JSX。要件

　　 3.直接

　　4.使用反應道具與孩子

　　·提示

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

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

　　3.支持通用組件

　　·引用

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

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

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

　　1.使用反應

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

　　這是 的簡寫。React.FCReact.FunctionComponent

　　當組件包含子元素時，類型腳本將提示一條警告：

　　使用反應

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

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

　　從打字機模板 #8177 中刪除 React.FC;

　　類型腳本 + 反應： 為什么我不使用反應FC。

　　阿拉伯數(shù)字。使用 JSX。元素

　　使用類型作為功能組件的返回值類型。當組件的返回值不是類型時，類型腳本將提示錯誤。JSX.ElementJSX.Element

　　使用 JSX。元素

　　3.直接定義完整類型

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

　　直接定義完整類型

　　4.使用反應道具與孩子

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

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

　　使用反應道具與孩子

　　技巧

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

　　當我們在函數(shù)組件中使用條件語句時，如果 React 返回非 JSX 元素或非空值，它將引發(fā)錯誤：

　　功能組件不能返回布爾值

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

　　當然，你不能這樣寫，當屬性是 時，它也會出錯：useRenderfalse

　　 阿拉伯數(shù)字。無法使用陣列填充組件

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

　　無法使用陣列填充組件

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

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

　　3.支持通用組件

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

　　它可以像這樣使用：

　　支持通用組件

　　更高級的用法在通用組件一章中進行了介紹：

　　通用組件

　　引用

　　反應

　　反應類型腳本備忘單