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函数表达式