3.5 React Props介紹

既然React函數(shù)組件可以通過JavaScript函數(shù)方式實現(xiàn)，那么React函數(shù)組件就可以接受參數(shù)的傳入。實際也確實如此，React框架定義了一個Props的概念，專門用來實現(xiàn)React函數(shù)組件接受參數(shù)的輸入。

下面看一個使用React Props實現(xiàn)參數(shù)輸入的具體代碼實例：

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

關(guān)于【代碼3-6】的說明：

●第18~24行代碼分別定義了一個React函數(shù)組件（PropsReactComp()），注意在函數(shù)內(nèi)定義了一個參數(shù)（props），具體說明如下：

? 第19~23行代碼通過條件語句判斷參數(shù)（props）是否為“true”，若為“true”，則執(zhí)行第20行代碼。

? 在第20行代碼中，通過參數(shù)（props）對象獲取其“name”屬性值，這個“name”屬性的定義在下面的第26行代碼中。

●第26行代碼中，通過const關(guān)鍵字定義了一個常量（eleProps），賦值為React函數(shù)組件（<PropsReactComp>）。這里的特別之處在于，在React函數(shù)組件（<PropsReactComp>）中增加定義了一個“name”屬性，同時初始化了屬性值（"King"）。在前面的第20行代碼中，就是通過參數(shù)（props）對象獲取了該“name”屬性的值。

測試網(wǎng)頁的效果如圖3.4所示。如圖中的箭頭所示，頁面中顯示了props參數(shù)對象獲取了的“name”屬性的值（King），這個就是React Props的基本使用方法。