全端筆記

留下學習的痕跡

0%

React — JSX 用法整理

發表於 分類於 Disqus：

React — JSX用法整理

⭐ JSX 語法重點

JSX 語法重點在於:
允許我們在 JS 的檔案中使用 HTML 的標籤，並且使用 JSX 語法建立「一個 React 的 element」，
而這樣的標籤語法比起 HTML，更貼近於 JavaScript!

❓ 什麼是JSX?

  • JSX是一個 JavaScript 對 XML 的擴充語法
  • React 可使用 JSX 來替代常規的 JavaScript(但使用 React 並不一定要使用 JSX)
  • 元素是構成 React 應用的最小單位，JSX 就是用来聲明 React 当中的元素。
  • 有助於精簡程式碼，且易於閱讀

✏️ 怎麼寫JSX?

1️⃣ 可以將變數傳入 JSX 語法中 ➡️ 將變數包在大括號 { } 內使用

1
2
const name = 'Amy';
const element = <h1>Hello, {name}</h1>;

2️⃣ 在 JSX 中執行函式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

function formatName(user) {
  return user.firstName+ ' ' + user.lastName;
}

const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);

3️⃣ JSX 本身也是 Expression ➡️ 可在條件判斷回傳中使用 JSX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const user = {
  firstName: 'Amy',
  lastName: 'Ke'
};

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

/* if/else 寫法
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}
*/

function getGreeting(user) {
  return user
    ? <p>Hello, {formatName(user)}!</p>
    : <p>Hello, Stranger.</p>;
}

4️⃣ 註解 ➡️ 也一樣使用 // 和 /* */ 當作註解方式，但在子元件註解要加 { }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 單行註解

/*
  多行註解
*/

const content = (
  <List>
      {/* 若是在子元件註解要加 {}  */}
      <Item
        /* 多行
          註解
          喔 */
        name={window.isLoggedIn ? window.name : ''} // 單行註解
      />
  </List>
);

💁‍♀️ 為了方便閱讀，我們將 JSX 拆成很多行表達:

  • element 的值被 ( ) 括起來，但 ( ) 並不是 JSX 語法的一環
  • 我們建議將多行 JSX 包在括號 ( ) 中來避免遇到自動分號補足的麻煩

5️⃣ 擴展屬性

6️⃣ Boolean 屬性

  • 在 JSX 中預設只有屬性名稱但沒設值，則預設為 true

    1
    2
    <input type="button" disabled />;
    <input type="button" disabled={true} />;

  • 在 JSX 中預設沒有屬性名稱，則預設為 false

    1
    2
    <input type="button" />;
    <input type="button" disabled={false} />;

⚠️ 使用 JSX 時需要注意的限制

1️⃣ HTML 屬性在 JSX 中的表示方式

標籤用法

  • Component 命名首字大寫 ⇒ MyImg
  • HTML 標籤小寫 ⇒ img
1
2
3
function MyImg() {
  return <img src={logo} className="App-logo" alt="logo" />
}

屬性命名規範

  • 由於 JSX 比較接近 JavaScript 而不是 HTML，React DOM 會使用駝峰式命名法 (camelCase) 來命名屬性，而不是使用慣有的 HTML 屬性名稱。

    • 例如: tabindex ➡️ tabIndex

  • JS 中的保留字(preserve word) ➡️ HTML中的 class、label 的 for，

    • class ➡️ className
    • for ➡️ htmlFor

  • 例外 ➡️ 不需要使用 camelCase 作為屬性命名規範

    • aria-*
    • data-*

  • Style 屬性 ➡️ 以 JS 物件的格式設定 (JSON)

    • 採用駝峰式命名法而非 -

    • 外面有兩層大括號 {{ }} ➡️ 第一個 { } 是 JSX 語法，第二個 { } 為 JavaScript 物件

    • 數值的單位是 px ➡️ 可不寫!

      1
      <div style={{ cursor: 'pointer', fontSize: 20 }}>Index</div>

    • 其他單位要用單引號 '' 包住 (例如: ‘50%’)

  • 在使用字串 (string) 屬性的時候使用引號 " "，使用 expressions 的時候使用大括號 { } ➡️ 但不要同時使用!

    1
    const element = <a href="https://www.reactjs.org"> link </a>;
    1
    2
    const url = "https://www.reactjs.org"
    const element = <img src={url}></img>;

  • 事件觸發 ➡️ 例如: onClick={ ( ) ⇒ { } }

    • 事件的名稱在 React 中都是 camelCase(駝峰式命名法)，而在 HTML DOM 中則是小寫
    • 事件的值在 JSX 中是一個 function，而在 HTML DOM 中則是一個 string

2️⃣ JSX 一定要有一個根元素(one single root element)

在使用 JSX 的時候，是至少需要一個根元素的，否則就會報錯!

3️⃣ 所有的標籤都須被閉合 (XML 的特性)

用 /> 立刻關閉這個標籤，例如: HTML <br> ➡️ JSX <br />

🔎 參考資料