JSX（JavaScript XML）語法

MerLin97發表於2024-03-18
JSJavaScriptXML

1. 在script標籤中使用JSX語法需要：

  • 使用babel
  • 在script標籤上新增：type="text/babel"

2. JSX中的註釋

  • 使用//、/**/
  • 使用{/**/}

3. 嵌入資料

  • 情況一：當變數是Number、String、Array型別時，可以直接顯示
  • 情況二：當變數是null、undefined、Boolean型別時，內容為空；
    • 如果希望可以顯示null、undefined、Boolean，那麼需要轉成字串；
    • 轉換的方式有很多，比如toString方法、和空字串拼接，String(變數)等方式；
  • 情況三：物件型別不能作為子元素（not valid as a React child）

4. 嵌入表示式：

  • 運算表示式
  • 三元/短路
  • 函式呼叫

5. 繫結屬性

  • 普通屬性的繫結可以按照規則繫結一個JS變數或函式返回值
  • 繫結class時，使用className來繫結
  • label標籤上的for替換為：htmlFor
  • 繫結style時：可以直接寫內聯物件，需要注意要使用小駝峰替換"-"連線的屬性

6. 繫結事件

  • React 事件的命名採用小駝峰式（camelCase），而不是純小寫;我們需要透過{}傳入一個事件處理函式，這個函式會在事件發生時被執行
  • 寫函式時要注意this的指向，可以使用bind, apply或箭頭函式來進行變數的準確指向
      {/* 1.方案一: bind繫結this(顯示繫結) */}
  <button onClick={this.btnClick.bind(this)}>按鈕1</button>
  <button onClick={this.btnClick.bind(this)}>按鈕2</button>
  <button onClick={this.btnClick.bind(this)}>按鈕3</button>

  {/* 2.方案二: 定義函式時, 使用箭頭函式 */}
  <button onClick={this.increment}>+1</button>
  increment = () => {
    console.log(this.state.counter);
  }

  {/* 3.方案三(推薦): 直接傳入一個箭頭函式, 在箭頭函式中呼叫需要執行的函式*/}
  <button onClick={() => { this.decrement("why") }}>-1</button>

相關文章