服务器之家

服务器之家 > 正文

React 入门第二步:搞懂 JSX 语法

时间:2021-08-26 22:10     来源/作者:勾勾的前端世界

React 入门第二步:搞懂 JSX 语法

JSX 是一个 JavaScript 的语法扩展,它不是字符串,也不是 HTML。

JSX 可以很好地描述 UI 交互的本质形式,它具有 JavaScript 的全部功能。JSX 可以生成 React “元素”。

基本使用

\src\index.js

  1. importReactfrom'react'
  2. importReactDomfrom'react-dom'
  3.  
  4. //看上去是HTML,但是实际是JSX
  5. consttitle=@lt;h1@gt;HelloReact@lt;/h1@gt;
  6. //调用ReactDom.render方法,传入jsx和节点对象
  7. ReactDom.render(title,document.getElementById('root'))

在使用 JSX 时,可以简单直接的按照 HTML 的规则来使用(你需要牢记它并不是 html ),那么有多行代码时,需要使用括号 () 包裹。

  1. importReactfrom'react'
  2. importReactDomfrom'react-dom'
  3.  
  4. //使用括号包裹jsx,可以换行,代码更加整洁
  5. consttitle=(
  6. @lt;div@gt;
  7. @lt;h1@gt;HelloReact@lt;/h1@gt;
  8. @lt;span@gt;嘿嘿嘿@lt;/span@gt;
  9. @lt;/div@gt;
  10. )
  11.  
  12. ReactDom.render(title,document.getElementById('root'))

设置 VS Code 编辑器,让 JSX 代码补全:

  1. 文件--首选项--设置--用户设置
  2.  
  3. 在用户设置添加
  4. @quot;emmet.includeLanguages@quot;:{
  5. @quot;javascript@quot;:@quot;javascriptreact@quot;
  6. }

如下图所示:

React 入门第二步:搞懂 JSX 语法

JSX 表达式

前面说到 JSX 具有 JavaScript 的全部功能,而在具体使用时可以直接套用 HTML 的规则。换句话说,在 HTML 规则里,如何展现 JS 的能力呢?

先来一点简单的常常甜头,JSX 中的能够进行:

  • 动态显示数据 {}
  • 调用方法: 自定义 + 内置
  • 支持表达式, 支持三元表达式
  • 模板字符串

接下来,我们开始搞它:

  1. importReactfrom'react';
  2. importReactDOMfrom'react-dom';
  3.  
  4. constname='西岭老湿'
  5.  
  6. functionsayHello(){
  7. return'大家好'
  8. }
  9.  
  10. constobj={
  11. name:'刘备',
  12. age:100
  13. }
  14.  
  15. constflag=true
  16.  
  17. //请开始你的表演====
  18. consttitle=(@lt;h2@gt;嘿嘿@lt;/h2@gt;)//JSX本身也是可直接食用的值哟
  19.  
  20. constApp=(
  21. @lt;div@gt;
  22. {/*注释在jsx中是这么个熊样子*/}
  23.  
  24. @lt;p@gt;name@lt;/p@gt;{/*这就鸳鸯(原样)展示了*/}
  25.  
  26. @lt;p@gt;{name}@lt;/p@gt;{/*动态获取变量数据*/}
  27.  
  28. @lt;p@gt;{sayHello()}@lt;/p@gt;{/*调用个函数违法吗?不*/}
  29.  
  30. {/*执行原生JS不合理吗?合理*/}
  31. @lt;p@gt;{console.log('1111')}@lt;/p@gt;
  32. @lt;p@gt;{Math.random()}@lt;/p@gt;
  33. @lt;p@gt;{JSON.stringify(obj)}@lt;/p@gt;
  34.  
  35. {/*三元运算让你吃醋了?没有*/}
  36. @lt;p@gt;{flag?'登录的状态':'执行登录'}@lt;/p@gt;
  37.  
  38. {/*模板字符下,字符串和变量结婚,可以吗?可以*/}
  39. @lt;p@gt;{`hello,${name}`}@lt;/p@gt;
  40.  
  41. {/*JSX也是可直接食用的值哟*/}
  42. @lt;div@gt;{title}@lt;/div@gt;
  43. @lt;/div@gt;
  44. )
  45.  
  46. ReactDOM.render(App,document.getElementById('root'));
  • JSX 本身就一个表达式
  • JSX 添加属性:

字符串属性,直接使用双引号包裹

动态属性,不用双引号,直接使用 {} class={xxx}

  • JSX 添加子元素

JSX 只有一个父元素

  • 单标签必须闭合
  1. //01jsx本身就是一个表达式
  2. constnames=@lt;h3@gt;西岭老湿@lt;/h3@gt;
  3.  
  4. //02添加属性
  5. constage=99
  6.  
  7. //03jsx添加子元素(JSX只有一个父元素)
  8.  
  9.  
  10. //04单标签必须闭合
  11.  
  12. //组件
  13. functionApp(){
  14. return(
  15. //返回中只能有一个JSX块
  16. //@lt;p@gt;@lt;/p@gt;//报错
  17. @lt;div@gt;
  18. {/*jsx本身就是一个表达式*/}
  19. {names}
  20.  
  21. {/*添加属性*/}
  22. @lt;page=@quot;age@quot;@gt;用户年龄属性@lt;/p@gt;{/*字符串属性*/}
  23. @lt;page={age}@gt;用户年龄属性@lt;/p@gt;{/*动态属性*/}
  24.  
  25. {/*单标签必须闭合*/}
  26. {/*@lt;img@gt;*/}{/*报错*/}
  27. {/*单标签正确写法*/}
  28. @lt;img/@gt;
  29.  
  30. @lt;/div@gt;
  31. );
  32. }
  33.  
  34. exportdefaultApp;

最后,JSX 最好使用一个小括号 () 包裹。

事件绑定

事件处理函数和事件绑定

  1. //事件处理函数
  2. constevent1=function(){
  3. alert('嘿嘿React')
  4. }
  5.  
  6. functionApp(){
  7. return(
  8. @lt;div@gt;
  9. @lt;h1@gt;事件绑定@lt;/h1@gt;
  10. {/*事件名使用驼峰法命名、直接使用函数赋值,不是函数调用*/}
  11. @lt;buttononClick={event1}@gt;你点啊@lt;/button@gt;
  12. @lt;/div@gt;
  13. )
  14. }
  15.  
  16. exportdefaultApp

事件传参

事件处理函数和事件绑定

因为事件绑定需要接收函数本身,作为事件处理,不能直接调用。

  1. //事件传参
  2. constevent1=function(name,age){
  3. alert(name)
  4. alert(age)
  5. }
  6.  
  7. functionApp(){
  8. return(
  9. @lt;div@gt;
  10. @lt;h1@gt;事件绑定@lt;/h1@gt;
  11. {/*因为事件绑定需要接收函数本身,作为事件处理,不能直接调用*/}
  12. {/*因此传参需要使用箭头函数返回事件处理函数,而不能是函数调用*/}
  13. @lt;buttononClick={()=@gt;{event1('西岭',16)}}@gt;你点啊@lt;/button@gt;
  14. @lt;br/@gt;
  15. {/*或者使用bind等其方式,将函数本身作为返回值传入*/}
  16.  
  17. @lt;buttononClick={event1.bind(null,'嬴政',999)}@gt;你再点一下试试@lt;/button@gt;
  18.  
  19. {/*再次强调JSX就是JS扩展,就是JS*/}
  20. @lt;/div@gt;
  21. )
  22. }
  23.  
  24. exportdefaultApp

因此传参需要使用箭头函数返回事件处理函数,而不能是函数调用,或者使用 bind 等其方式,将函数本身作为返回值传入。

再次强调 JSX 就是 JS 扩展,就是 JS。

事件对象传参

01 函数无传参:

事件对象默认传入,因此直接在事件处理函数中形参接收即可。

02 箭头函数传参:

因为事件对象有默认传入,而使用箭头函数时,则需要在箭头函数中传入后,再在箭头函数返回的函数中传入。

03 bind 等其方式:

将函数本身作为返回值传入,事件对象默认会添加在最后一个参数中。

无论有无参数传入,事件对象都不需要写,事件处理函数按顺序接收即可。

  1. //事件对象传参
  2. constevent1=function(ev){
  3. console.log(ev);
  4. }
  5.  
  6. functionApp(){
  7. return(
  8. @lt;div@gt;
  9. @lt;h1@gt;事件绑定@lt;/h1@gt;
  10. {/*01函数无传参*/}
  11. {/*事件对象默认传入,因此直接在事件处理函数中形参接收即可*/}
  12. @lt;buttononClick={event1}@gt;点一下?@lt;/button@gt;@lt;br/@gt;
  13.  
  14.  
  15. {/*02箭头函数传参
  16. 因为事件对象有默认传入,而使用箭头函数时,则需要在箭头函数中传入后
  17. 再在箭头函数返回的函数中传入*/}
  18. @lt;buttononClick={(ev)=@gt;{event1(ev,'西岭',16)}}@gt;你点啊@lt;/button@gt;@lt;br/@gt;
  19.  
  20. {/*03bind等其方式
  21. 将函数本身作为返回值传入,事件对象默认会添加在最后一个参数中
  22. 无论有无参数传入,事件对象都不需要写,事件处理函数按顺序接收即可*/}
  23. @lt;buttononClick={event1.bind(null)}@gt;你再点一下试试@lt;/button@gt;
  24.  
  25. @lt;/div@gt;
  26. )
  27. }
  28.  
  29. exportdefaultApp

列表渲染

JSX 默认会对数组进行结构,因此可以直接在 JSX 中展示数组的值。

  1. constitem1=[1,3,5]
  2.  
  3. functionApp(){
  4. return(
  5. @lt;div@gt;
  6. {/*JSX默认会对数组进行结构*/}
  7. @lt;h1@gt;{item1}@lt;/h1@gt;
  8. @lt;/div@gt;
  9. )
  10. }
  11.  
  12. exportdefaultApp

同理,如果数组元素值也是 JSX,同样可以进行直接使用。

  1. constitem1=[1,3,5]
  2. constitem2=[
  3. @lt;p@gt;item1@lt;/p@gt;,
  4. @lt;p@gt;item1@lt;/p@gt;,
  5. @lt;p@gt;item1@lt;/p@gt;
  6. ]
  7.  
  8. functionApp(){
  9. return(
  10. @lt;div@gt;
  11. {/*JSX默认会对数组进行结构*/}
  12. @lt;h1@gt;{item1}@lt;/h1@gt;
  13. {/*数组值为jsx同样可以直接使用*/}
  14. @lt;div@gt;
  15. {item2}
  16. @lt;/div@gt;
  17. @lt;/div@gt;
  18. )
  19. }
  20.  
  21. exportdefaultApp

而在项目中,大部分获取到的数组元素是对象数据,要对其进行结构展示,就需要对数组进行循环操作后使用。

  1. //数组数据
  2. constarr=[
  3. {id:1,name:'痴心绝对'},
  4. {id:2,name:'像我这样的人'},
  5. {id:3,name:'南山南'}
  6. ]
  7.  
  8. //===数据遍历===
  9. functionloops(){
  10. vara2=[]
  11. //循环遍历数据
  12. for(vari=0;i@lt;arr.length;i++){
  13. //将数组内容结构为JSX数组
  14. a2.push(@lt;h1key={arr[i].id}@gt;{arr[i].name}@lt;/h1@gt;)
  15. }
  16. returna2
  17. }
  18.  
  19. functionApp(){
  20. return(
  21. @lt;div@gt;
  22. {/*调用遍历函数,获取JSX数组展示*/}
  23. {loops()}
  24. @lt;/div@gt;
  25. )
  26. }
  27.  
  28. exportdefaultApp

这样的方式因为过于繁琐,并不推荐使用。

但是,基本思路是不变的,因为 JSX 可以自动结构数组结构,我们只需要将数据的数据遍历为 JSX 数据形式使用就可以了,因此,我们可以选择一种更为优雅的遍历方式map() 函数。

  1. //数组数据
  2. constarr=[
  3. {id:1,name:'绝对痴心'},
  4. {id:2,name:'像我这样帅的人'},
  5. {id:3,name:'南山难'}
  6. ]
  7.  
  8. functionApp(){
  9. return(
  10. @lt;div@gt;
  11. {/*map方法遍历数组*/}
  12. {arr.map(item=@gt;@lt;h3@gt;{item.id}--{item.name}@lt;/h3@gt;)}
  13. @lt;/div@gt;
  14. )
  15. }
  16.  
  17. exportdefaultApp

样式设置

内联样式

样式需要以对象形式展示:

  1. //声明样式对象
  2. conststyles={
  3. color:'red',
  4. //样式的属性名需要处理,要么
  5. //font-size:'20px',//直接使用报错
  6. fontSize:'30px',//转大写√
  7. 'background-color':'pink'//引号包裹√
  8. }
  9.  
  10. functionApp(){
  11. return(
  12. @lt;div@gt;
  13. {/*内联样式需要以对象形式展示*/}
  14. @lt;h3style={{color:@quot;red@quot;}}@gt;西岭老湿@lt;/h3@gt;
  15. @lt;pstyle={styles}@gt;真的很帅@lt;/p@gt;
  16. @lt;/div@gt;
  17. )
  18. }
  19.  
  20. exportdefaultApp

外联样式

创建对应的 CSS 文件,使用模块化语法规则引入样式文件。

创建 CSS 文件 \src\App.css

  1. body{
  2. background-color:skyblue;
  3. color:blue;
  4. }
  5.  
  6. .box{
  7. font-size:30px;
  8. }

\src\App.js

  1. //引入外联样式文件
  2. import'./App.css'
  3.  
  4. functionApp(){
  5. return(
  6. @lt;div@gt;
  7. @lt;h3@gt;小蓝同学@lt;/h3@gt;
  8. @lt;pclassName=@quot;box@quot;@gt;胖蓝@lt;/p@gt;
  9. @lt;/div@gt;
  10. )
  11. }
  12. export default App

条件渲染

条件渲染就是函数调用。

  1. importReactfrom'react'
  2. importReactDomfrom'react-dom'
  3.  
  4. varf=false
  5.  
  6. constfun1=()=@gt;{
  7. if(f){
  8. return(@lt;h1@gt;哈哈哈哈@lt;/h1@gt;)
  9. }else{
  10. return(@lt;h2@gt;嘿嘿@lt;/h2@gt;)
  11. }
  12. }
  13. consttitle=(
  14. //使用括号,可以换行,代码更加整洁
  15. @lt;div@gt;
  16. {fun1()}
  17. @lt;/div@gt;
  18. )
  19.  
  20. ReactDom.render(title,document.getElementById('root'))

原文链接:https://mp.weixin.qq.com/s/5o7cieCgHXy2dxDHvxLSMA

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部