2.7 JSX函數表達式

在React JSX中還可以直接調用JavaScript函數，這就是JSX函數表達式。JSX函數表達式應用起來非常簡單、靈活，具有很強大的功能。為了更好地進行對比，我們將【代碼2-6】按照函數表達式的形式進行改寫，具體代碼實例如下：

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

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

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

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

●在第31行代碼定義的JSX中，通過函數表達式“formatUserinfo(userinfo)”的方式獲取了常量對象（userinfo）的信息。

測試網頁的效果如圖2.6所示。如圖中的箭頭所示，JSX函數表達式成功顯示出了常量對象（userinfo）中定義的內容。

圖2.6 React JSX函數表達式