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. }

如下图所示：

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