JSX 屬性練習

根據昨天提到的，在撰寫 React 會大量使用到 JSX 的部分，除了基本的樣板以外，今天也持續介紹常見的 JSX 使用，一起來練習看看吧！

JSX 最外層只能有一個根元件

一個元件不能返回多個元素，就像一個函數不能返回多個值一樣，有點像是 Vue template 的寫法一樣，外層必須得有個 div 或是 template 標籤來做包覆。 錯誤示範：

const element = <h2> Hello！</h2><h2> 你好！</h2>

正確示範：

const element = (
  <div>
    <h2> Hello！</h2>
    <h2> 你好！</h2>
  </div>
);

JSX 中的 class

在 JSX 同樣可以加入 class 來指定樣式，但要注意屬性名稱需改為 className。 例如：

const element = (
  <div className="card">
    <h2> Hello！</h2>
    <h2> 你好！</h2>
  </div>
);

JSX 中的屬性代入

在 JSX 中需要被視為 JavaScript 處理的部分，都需要使用大括號 {} 包住。 例如：

const imgUrl = "https://img.icons8.com/plasticine/344/jake.png";
<img src={imgUrl} />;

Demo