- React.js 16从入门到实战
- 王金柱
- 265字
- 2021-03-24 11:10:31
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=1739005883-omXOQeClRGWKzjzwC4AmqHmGXUvaMNVB-0-63365b92ea31ead425f766dcfd9d60c9)
关于【代码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=1739005883-WP4EaWaQxUmzy8iyPdeAN6GfsSJuuUeS-0-d6eb7dac8698f46c957316f74877c8cb)
图2.4 React JSX嵌入表达式