[Day 11] React 保衛戰 - 注意！JSX 元素屬性是 HTML 元素屬性的變形

11th鐵人賽

谷哥

2019-09-26 23:58:58

1310 瀏覽

分享至

讀者進入以下網址：https://codesandbox.io/s/new，就能進到由 CodeSandbox 提供的線上開發環境以及使用 create-react-app 指令建立好的 React 專案來進行練習

變形的屬性 - JSX 元素屬性

在 HTML 語法中元素具有屬性，我們可以藉由設定屬性來調整元素的行為，例如：<input maxlength="20" autofocus type="password" placeholder="請輸入密碼" > 中 maxlength 可以設定字元長度、autofocus 可以設定自動進入編輯模式、type 可以設定輸入的資料類型、placeholder 則可以設定提示文字等等。

雖然說 JSX 最終也會轉換成 HTML，但是元素屬性在寫法上會有一些不同的地方。

JSX 元素屬性命名改為小駝峰式命名法

JSX 語法寫起來類似 HTML 但執行前會先被 babel 轉譯為 JavaScript，所以本質上比較接近 JavaScript，也因此 JSX 元素的屬性名稱必須遵守 JavaScript 的命名習慣 - 小駝峰式命名法(lower camel case)，原本在 HTML 語法的屬性名稱在 JSX 元素中就要改用小駝峰式命名法，以上面的例子來說 autofocus 要改寫為 autoFocus，maxlength 改寫為 maxLength，其餘屬性不變：

function App() {
  return (
    <div className="App">
      <input maxLength="20" autoFocus type="password" placeholder="請輸入密碼" />
    </div>
  );
}

JSX 元素屬性值也可以嵌入 JavaScript 運算式

前一篇文章提到，JSX 元素內容可以嵌入 JavaScript 運算式，JSX 元素屬性值也可以嵌入 JavaScript 運算式，同樣也是要由 {} 包起來，例如以下程式碼：

function App() {
  const hint = "請輸入密碼";
  
  return (
    <div className="App">
      {/* {hint} -> 會替換成 -> 請輸入密碼 */}
      <input maxLength="20" autoFocus type="password" placeholder={hint} />
    </div>
  );
}

將物件解構為 JSX 元素屬性值

這是在 JSX 中比較特別的寫法，我們可以將多個屬性值宣告為一個物件，再透過物件解構的方式，以 {} 包起來加入 JSX 元素中，例如以下程式碼：

function App() {
  const attributes = {
    type: "password",
    placeholder: "請輸入密碼"
  };

  return (
    <div className="App">
      <input maxLength="20" autoFocus type="password" placeholder="請輸入密碼" />
      <input maxLength="20" autoFocus {...attributes} />
    </div>
  );
}

變形的 class 屬性 - 改寫為 className

JSX 所有的元素屬性名稱都遵守小駝峰式命名法，唯有 class 屬性的 class 在 JSX 中必須改寫為 className，這是因為 class 是 ES6 中的關鍵字，用來宣告一個類別，在 React 常被用來建立一個類別元件，為了避免和這個關鍵字互相衝突到，所以 class 屬性的 class 才特別要改寫為 className，各位讀者回去看前面的範例程式碼中，可以發現最外層 div 元素的 class 屬性都是寫成 className 而非 class。

變形的 event 屬性值 - 嵌入 JavaScript 函式

event 屬性是屬性中特別的一類，用來偵測發生在元素上的事件，並且於事件發生時執行 JavaScript 程式碼。

JSX 元素和 HTML 元素的 event 屬性有下列三個差異，其中前兩個先前已經提過，

JSX 屬性名稱遵守小駝峰式命名法；HTML 屬性名稱全部小寫
JSX 屬性值用 {} 包起來；HTML 屬性值用 "" 包起來
JSX 屬性值要給定事件發生時要執行的函式；HTML 屬性值要給定事件發生時要執行的 JavaScript 程式碼

舉個例子，如果要在一個按鈕按下去時跳出警告視窗，若用 HTML 的寫法會是：

function App() {
  return (
    <div className="App">
      {/* 在 JSX 中用 HTML 的寫法會出現錯誤 Warning: Invalid event handler property `onclick`. Did you mean `onClick`? */}
      <button onclick="window.alert()">點我</button>
    </div>
  );
}

修正為 JSX 的寫法則是：

function App() {
  return (
    <div className="App">
      <button onClick={function() { window.alert(); }}>點我</button>
    </div>
  );
}

其中 function() { window.alert(); } 為一匿名函式，也就是沒有名稱的函式，我們也可以改用ES6 箭頭函式的語法來改寫：

function App() {
  return (
    <div className="App">
      <button onClick={() => { window.alert(); }}>點我</button>
    </div>
  );
}

進一步將此匿名函式改成事先宣告，再設定給 event 屬性，讓程式碼變得比較容易閱讀：

function App() {
  const handleClick = e => {
    window.alert(e.target);
    e.preventDefault();
  };

  return (
    <div className="App">
      <button onClick={handleClick}>點我</button>
    </div>
  );
}

設定給 event 屬性的函式可以得到一個參數，為一個由 React 處理過跨瀏覽器支援的 event 物件，可以取得當前元素或是停止預設行為等等，大部分屬性與方法如同瀏覽器原生的 event 物件。