[[419476]]

JSX 是一個 JavaScript 的語法擴展，它不是字符串，也不是 HTML。

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

基本使用

\src\index.js

import React from 'react' 
import ReactDom from 'react-dom' 
 
// 看上去是 HTML，但是實際是JSX  
const title = <h1>Hello React</h1> 
// 調用 ReactDom.render方法，傳入 jsx和節點對象 
ReactDom.render(title,document.getElementById('root')) 

在使用 JSX 時，可以簡單直接的按照 HTML 的規則來使用(你需要牢記它并不是 html )，那么有多行代碼時，需要使用括號 () 包裹。

import React from 'react' 
import ReactDom from 'react-dom' 
 
// 使用括號包裹jsx ，可以換行，代碼更加整潔 
const title = ( 
  <div> 
   <h1>Hello React</h1> 
    <span>嘿嘿嘿</span> 
  </div> 
) 
 
ReactDom.render(title,document.getElementById('root')) 

設置 VS Code 編輯器，讓 JSX 代碼補全：

文件--首選項--設置--用戶設置 
 
在用戶設置添加 
"emmet.includeLanguages": { 
         "javascript":"javascriptreact" 
} 

如下圖所示：

JSX 表達式

前面說到 JSX 具有 JavaScript 的全部功能，而在具體使用時可以直接套用 HTML 的規則。換句話說，在 HTML 規則里，如何展現 JS 的能力呢?

先來一點簡單的常常甜頭，JSX 中的能夠進行：

• 動態顯示數據 {}
• 調用方法: 自定義 + 內置
• 支持表達式, 支持三元表達式
• 模板字符串

接下來，我們開始搞它：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
 
const name= '西嶺老濕' 
 
function sayHello () { 
  return '大家好' 
} 
 
const obj = { 
  name: '劉備', 
  age: 100 
} 
 
const flag = true 
 
// 請開始你的表演==== 
const title = (<h2>嘿嘿</h2>) // JSX 本身也是可直接食用的值喲 
 
const App = ( 
    <div> 
      {/* 注釋在 jsx 中是這么個熊樣子*/} 
 
     <p>name</p> {/* 這就鴛鴦(原樣)展示了*/} 
 
     <p>{name}</p> {/* 動態獲取變量數據 */} 
 
     <p>{sayHello()}</p> {/* 調用個函數違法嗎? 不 */} 
 
      {/* 執行原生 JS 不合理嗎? 合理 */} 
     <p>{console.log('1111')}</p> 
     <p>{Math.random()}</p> 
     <p>{JSON.stringify(obj)}</p> 
 
      {/* 三元運算讓你吃醋了? 沒有 */} 
     <p>{flag ? '登錄的狀態' :'執行登錄'}</p> 
 
      {/* 模板字符下,字符串和變量結婚,可以嗎? 可以 */} 
     <p>{`hello, ${name}`}</p> 
 
      {/* JSX 也是可直接食用的值喲 */} 
     <div>{title}</div> 
    </div> 
  ) 
 
ReactDOM.render(App,document.getElementById('root')); 

• JSX 本身就一個表達式
• JSX 添加屬性：

字符串屬性，直接使用雙引號包裹

動態屬性，不用雙引號，直接使用 {} class={xxx}

• JSX 添加子元素

JSX 只有一個父元素

• 單標簽必須閉合

// 01 jsx 本身就是一個表達式 
const names = <h3>西嶺老濕</h3> 
 
// 02 添加屬性 
const age =99 
 
// 03 jsx 添加子元素（JSX只有一個父元素） 
 
 
// 04 單標簽必須閉合 
 
// 組件 
functionApp() { 
  return ( 
    // 返回中只能有一個JSX 塊 
    // <p></p> // 報錯 
    <div> 
      {/* jsx 本身就是一個表達式 */} 
      {names} 
 
      {/* 添加屬性 */} 
      <page="age">用戶年齡屬性</p>{/* 字符串屬性 */} 
      <page={age}>用戶年齡屬性</p>{/* 動態屬性 */} 
 
      {/* 單標簽必須閉合 */} 
      {/* <img >   */}{/*報錯*/} 
      {/* 單標簽正確寫法 */} 
      <img/> 
 
    </div> 
  ); 
} 
 
exportdefault App; 

最后，JSX 最好使用一個小括號 () 包裹。

事件綁定

事件處理函數和事件綁定

// 事件處理函數 
const event1 =function(){ 
  alert('嘿嘿 React') 
} 
 
functionApp (){ 
  return ( 
    <div> 
      <h1>事件綁定</h1> 
      {/* 事件名使用駝峰法命名、直接使用函數賦值，不是函數調用 */} 
      <buttononClick={event1}>你點啊</button> 
    </div> 
  ) 
} 
 
exportdefault App 

事件傳參

事件處理函數和事件綁定

因為事件綁定需要接收函數本身，作為事件處理，不能直接調用。

//事件傳參 
const event1 =function(name,age){ 
  alert(name) 
  alert(age) 
} 
 
functionApp (){ 
  return ( 
    <div> 
      <h1>事件綁定</h1> 
      {/* 因為事件綁定需要接收函數本身，作為事件處理，不能直接調用 */} 
      {/* 因此傳參需要使用箭頭函數返回事件處理函數,而不能是函數調用 */} 
      <buttononClick={()=>{event1('西嶺',16)}}>你點啊</button> 
      <br/> 
      {/* 或者使用 bind等其方式，將函數本身作為返回值傳入 */} 
 
      <buttononClick={event1.bind(null,'嬴政',999)}>你再點一下試試</button> 
 
      {/* 再次強調 JSX 就是 JS 擴展，就是JS  */} 
    </div> 
  ) 
} 
 
exportdefault App 

因此傳參需要使用箭頭函數返回事件處理函數,而不能是函數調用，或者使用 bind 等其方式，將函數本身作為返回值傳入。

再次強調 JSX 就是 JS 擴展，就是 JS。

事件對象傳參

01 函數無傳參：

事件對象默認傳入，因此直接在事件處理函數中形參接收即可。

02 箭頭函數傳參：

因為事件對象有默認傳入，而使用箭頭函數時，則需要在箭頭函數中傳入后，再在箭頭函數返回的函數中傳入。

03 bind 等其方式：

將函數本身作為返回值傳入，事件對象默認會添加在最后一個參數中。

無論有無參數傳入，事件對象都不需要寫，事件處理函數按順序接收即可。

// 事件對象傳參 
const event1 =function (ev) { 
  console.log(ev); 
} 
 
functionApp() { 
  return ( 
    <div> 
      <h1>事件綁定</h1> 
      {/* 01 函數無傳參 */} 
      {/* 事件對象默認傳入，因此直接在事件處理函數中形參接收即可 */} 
      <buttononClick={event1}>點一下？</button>  <br/> 
 
 
      {/* 02 箭頭函數傳參 
      因為事件對象有默認傳入，而使用箭頭函數時，則需要在箭頭函數中傳入后 
      再在箭頭函數返回的函數中傳入 */} 
      <buttononClick={(ev) => { event1(ev,'西嶺',16) }}>你點啊</button><br/> 
 
      {/* 03 bind 等其方式 
      將函數本身作為返回值傳入，事件對象默認會添加在最后一個參數中 
      無論有無參數傳入，事件對象都不需要寫，事件處理函數按順序接收即可 */} 
      <buttononClick={event1.bind(null)}>你再點一下試試</button> 
 
    </div> 
  ) 
} 
 
exportdefault App 

列表渲染

JSX 默認會對數組進行結構，因此可以直接在 JSX 中展示數組的值。

const item1 = [1,3,5] 
 
functionApp() { 
  return ( 
    <div> 
      {/* JSX 默認會對數組進行結構 */} 
      <h1>{item1}</h1> 
    </div> 
  ) 
} 
 
exportdefault App 

同理，如果數組元素值也是 JSX，同樣可以進行直接使用。

const item1 = [1,3,5] 
const item2 = [ 
  <p>item1</p>, 
  <p>item1</p>, 
  <p>item1</p> 
] 
 
functionApp() { 
  return ( 
    <div> 
      {/* JSX 默認會對數組進行結構 */} 
      <h1>{item1}</h1> 
      {/* 數組值為 jsx 同樣可以直接使用*/} 
      <div> 
        {item2} 
      </div> 
    </div> 
  ) 
} 
 
exportdefault App 

而在項目中，大部分獲取到的數組元素是對象數據，要對其進行結構展示，就需要對數組進行循環操作后使用。

// 數組數據 
const arr = [ 
  { id:1,name:'癡心絕對' }, 
  { id:2,name:'像我這樣的人' }, 
  { id:3,name:'南山南' } 
] 
 
// === 數據遍歷 === 
functionloops() { 
  var a2 = [] 
  // 循環遍歷數據 
  for (var i =0; i < arr.length; i++) { 
    // 將數組內容結構為JSX 數組 
    a2.push(<h1key={arr[i].id}>{arr[i].name}</h1>) 
  } 
  return a2 
} 
 
functionApp() { 
  return ( 
    <div> 
      {/* 調用遍歷函數，獲取 JSX 數組展示 */} 
      {loops()} 
    </div> 
  ) 
} 
 
exportdefault App 

這樣的方式因為過于繁瑣，并不推薦使用。

但是，基本思路是不變的，因為 JSX 可以自動結構數組結構，我們只需要將數據的數據遍歷為 JSX 數據形式使用就可以了，因此，我們可以選擇一種更為優雅的遍歷方式map() 函數。

// 數組數據 
const arr = [ 
  { id:1,name:'絕對癡心' }, 
  { id:2,name:'像我這樣帥的人' }, 
  { id:3,name:'南山難' } 
] 
 
functionApp() { 
  return ( 
    <div> 
      {/* map 方法遍歷數組 */} 
      {arr.map(item=><h3>{item.id}--{item.name}</h3> )} 
    </div> 
  ) 
} 
 
exportdefault App 

樣式設置

內聯樣式

樣式需要以對象形式展示：

//聲明樣式對象 
const styles = { 
  color:'red', 
  // 樣式的屬性名需要處理,要么 
  // font-size:'20px', // 直接使用報錯 
  fontSize:'30px',// 轉大寫 √ 
  'background-color':'pink'// 引號包裹 √ 
} 
 
functionApp (){ 
  return ( 
    <div> 
      {/* 內聯樣式需要以對象形式展示 */} 
      <h3style={{color:"red"}}>西嶺老濕</h3> 
      <pstyle={styles}>真的很帥</p> 
    </div> 
  ) 
} 
 
exportdefault App 

外聯樣式

創建對應的 CSS 文件，使用模塊化語法規則引入樣式文件。

創建 CSS 文件 \src\App.css

body{ 
  background-color: skyblue; 
  color: blue; 
} 
 
.box{ 
  font-size: 30px; 
} 

\src\App.js

// 引入外聯樣式文件 
import './App.css' 
 
function App (){ 
  return ( 
    <div> 
      <h3>小藍同學</h3> 
      <pclassName="box">胖藍</p> 
    </div> 
  ) 
} 
export default App

條件渲染

條件渲染就是函數調用。

import React from 'react' 
import ReactDom from 'react-dom' 
 
var f = false 
 
const fun1 = ()=>{ 
    if(f){ 
      return(<h1>哈哈哈哈</h1>) 
    }else{ 
      return(<h2>嘿嘿</h2>) 
    } 
} 
const title = ( 
  // 使用括號，可以換行，代碼更加整潔 
  <div> 
    {fun1()} 
  </div> 
) 
 
ReactDom.render(title,document.getElementById('root')) 

 【編輯推薦】