2.8 JSX增強函數(shù)表達式

在前文中我們知道，在React JSX中是無法直接使用if條件語句的。不過，可以通過JSX函數(shù)表達式以變通的方式來使用。因為，JSX可以作為參數(shù)傳入并嵌套在另一個JSX之中。為了更好地進行對比，我們再將【代碼2-7】進一步做改寫，具體代碼實例如下：

【代碼2-8】（詳見源代碼目錄ch02-react-jsx-exp-func-plus.html文件）

關于【代碼2-8】的說明：

●第18~22行代碼通過const運算符定義了一個常量對象（userinfo），并初始化了一組屬性。

●第24~26行代碼定義了第一個函數(shù)（formatUserinfo），該函數(shù)返回了一個將常量對象（userinfo）進行組合后的字符串信息。

●第28~34行代碼定義了第二個函數(shù)（chooseUserinfo），該函數(shù)通過if條件語句判斷傳入的參數(shù)（ui）。若判斷結果為“true”，則調用formatUserinfo()方法返回一個將常量對象（userinfo）進行組合后的字符串信息。若判斷結果為“false”，則直接返回“Hello, userinfo is nothing（用戶信息為空）”的提示信息。

●在第39行代碼定義的JSX中，通過帶參數(shù)的函數(shù)表達式（chooseUserinfo(userinfo)）方式獲取了用戶信息。

●在第40行代碼定義的JSX中，通過無參數(shù)的函數(shù)表達式（chooseUserinfo()）方式獲取了相應的信息。

測試網(wǎng)頁的效果如圖2.7所示。如圖中的箭頭所示，通過無參數(shù)的函數(shù)表達式（chooseUserinfo()）方式獲取了“Hello, userinfo is nothing（用戶信息為空）”的提示信息。