![React.js 16从入门到实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/135/29977135/b_29977135.jpg)
上QQ阅读APP看书,第一时间看更新
2.5 JSX嵌入表达式
React JSX可以支持嵌入表达式,这具体是个什么概念呢?简单来讲,如果我们先声明定义了一个变量,就可以通过在JSX中引用该变量的方式进行使用。下面看一个具体的代码实例:
【代码2-5】(详见源代码目录ch02-react-jsx-exp-embed.html文件)
![](https://epubservercos.yuewen.com/27D3F5/16499866705998906/epubprivate/OEBPS/Images/Figure-P37_4891.jpg?sign=1739436902-Pp7NGfago3GHKgP0WM6pBToYA0b9k55i-0-e2b2cd2c9d7a8639a1c1eff3981b51af)
关于【代码2-5】的说明:
●第18行代码中通过const运算符定义了一个常量(name),并初始化为字符串“King”。
●第20~25行代码定义了JSX常量(reactSpan),其中在第23行代码中直接通过表达式“{name}”方式嵌入了第19行代码定义的常量(name)。
测试网页的效果如图2.4所示。如图中的箭头所示,嵌入JSX的表达式“{name}”成功显示出了预先所定义的内容(King)。
![](https://epubservercos.yuewen.com/27D3F5/16499866705998906/epubprivate/OEBPS/Images/Figure-P38_5094.jpg?sign=1739436902-QMQjHZcr1ecTpDkGhxgFioLZ4pEagIbj-0-fcd8cb48feffdccc7552d6f95701e35b)
图2.4 React JSX嵌入表达式