3.6 React Props應用

既然React Props可以接受參數的傳入，它就可以在具體項目應用發揮很大的作用。下面看一個使用React Props參數實現表單初始化的代碼實例，具體如下：

【代碼3-7】（詳見源代碼目錄ch03-react-props-form.html文件）

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

●這段代碼是在【代碼3-5】的基礎上修改而成的，主要是通過React Props參數傳入實現表單的初始化操作。

●第18~44行代碼分別定義了若干React函數組件，用于構建一個React組合組件，該組合組件定義為一個用戶登錄表單。此處的定義與【代碼3-5】類似，不同之處說明如下：

? 在第21~26行代碼定義的React函數組件（UserId()）中，增加了Props參數的定義。

? 在第27~32行代碼定義的React函數組件（UserName()）中，也增加了Props參數的定義。

●在第46~56行代碼定義的React組合組件（FormLogin()）中，第50行和第51行代碼分別增加了“userId”和“userName”屬性的定義，同時初始化了屬性值。

測試網頁的效果如圖3.5所示。如圖中的箭頭所示，頁面表單中的“User Id”項和“User Name”項分別進行了初始化操作，分別獲取了屬性值（007）和屬性值（King）。