3.4 React組合組件

React組件支持在自身定義中引用其他組件，從而構成React組合組件（也稱復合組件）。使用React組合組件定義的好處就是，可以使用同一組件來抽象出任意層次的細節，比如一個React表單組件就可以由多個不同類型的子組件來構成，還有對于對話框組件來說也是如此。

下面看一個通過React組合組件實現用戶登錄表單的代碼實例，具體如下：

【代碼3-5】（詳見源代碼目錄ch03-react-comp-composing.html文件）

關于【代碼3-5】的說明：

●第18~44行代碼分別定義了若干React函數組件，用于構建一個React組合組件，該組合組件定義為一個用戶登錄表單，具體說明如下：

? 第18~20行代碼定義的React函數組件（FormTitle()），用于定義表單名稱。

? 第21~26行代碼定義的React函數組件（UserId()），用于定義表單中的用戶id域控件。

? 第27~32行代碼定義的React函數組件（UserName()），用于定義表單中的用戶名域控件。

? 第33~38行代碼定義的React函數組件（Password()），用于定義表單中的密碼域控件。

? 第39~44行代碼定義的React函數組件（Submit()），用于定義表單中的提交按鈕域控件。

●關鍵是第46~56行代碼定義的React組合組件（FormLogin()），其中第49~53行代碼分別引用了第18~38行代碼定義的若干React函數組件，用來組成表單中的各個用戶域。

●第58行代碼中，通過const關鍵字定義了一個常量（formLogin），賦值為React組合組件（<FormLogin>）。

●第63行代碼中，通過將常量（formLogin）放入JSX代碼（{formLogin}）來實現React組合組件的應用。

測試網頁的效果如圖3.3所示。如圖中的標識所示，頁面中顯示了通過React組合組件實現的用戶登錄表單頁面。