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