學習 React
描述 UI

在 JSX 中使用大括號嵌入 JavaScript

JSX 允許你在 JavaScript 檔案中編寫類似 HTML 的標記，將渲染邏輯和內容保持在同一個位置。有時你會想要在該標記內添加一些 JavaScript 邏輯或引用動態屬性。在這種情況下，你可以在 JSX 中使用大括號來開啟 JavaScript 的窗口。

你將學到

  • 如何傳遞帶引號的字串
  • 如何使用大括號在 JSX 中引用 JavaScript 變數
  • 如何使用大括號在 JSX 中呼叫 JavaScript 函式
  • 如何使用大括號在 JSX 中使用 JavaScript 物件

傳遞帶引號的字串

當你想將字串屬性傳遞給 JSX 時，請將其放在單引號或雙引號中

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

在這裡，"https://i.imgur.com/7vQD0fPs.jpg" 和 "Gregorio Y. Zara" 作為字串傳遞。

但是，如果你想動態指定 src 或 alt 文字呢？你可以**使用 JavaScript 中的值，將 " 和 " 替換為 { 和 }**

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

請注意 className="avatar"（指定使圖像變圓的 "avatar" CSS 類別名稱）和 src={avatar}（讀取名為 avatar 的 JavaScript 變數的值）之間的區別。這是因為大括號可讓你直接在標記中使用 JavaScript！

使用大括號：通往 JavaScript 世界的窗口

JSX 是一種特殊的 JavaScript 編寫方式。這意味著可以在其中使用 JavaScript — 使用大括號 { }。以下範例首先宣告科學家的名稱 name，然後使用大括號將其嵌入 <h1> 中

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

嘗試將 name 的值從 'Gregorio Y. Zara' 更改為 'Hedy Lamarr'。看看清單標題如何變化？

任何 JavaScript 運算式都可以在大括號之間使用，包括函式呼叫，例如 formatDate()

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

哪裡使用大括號

你只能在 JSX 內以兩種方式使用大括號

  1. **作為文字**直接在 JSX 標籤內：<h1>{name} 的待辦事項清單</h1> 可以使用，但 <{tag}>Gregorio Y. Zara 的待辦事項清單</{tag}> 不行。
  2. **作為屬性**緊跟在 = 符號之後：src={avatar} 將讀取 avatar 變數，但 src="{avatar}" 將傳遞字串 "{avatar}"。

使用「雙重大括號」：JSX 中的 CSS 和其他物件

除了字串、數字和其他 JavaScript 運算式之外，您甚至可以在 JSX 中傳遞物件。物件也用大括號表示，例如 { name: "Hedy Lamarr", inventions: 5 }。因此，若要在 JSX 中傳遞 JS 物件，您必須將物件用另一對大括號括起來：person={{ name: "Hedy Lamarr", inventions: 5 }}。

您可能會在 JSX 的內嵌 CSS 樣式中看到這種情況。React 並不要求您使用內嵌樣式（在大多數情況下，CSS 類別效果很好）。但是當您需要內嵌樣式時，您可以將物件傳遞給 style 屬性

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

嘗試更改 backgroundColor 和 color 的值。

當您這樣寫的時候，您可以清楚地看到大括號內的 JavaScript 物件

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

下次您在 JSX 中看到 {{ 和 }} 時，要知道它只是一個位於 JSX 大括號內的物件！

陷阱

內嵌 style 屬性以駝峰式大小寫 (camelCase) 撰寫。例如，HTML 的 <ul style="background-color: black"> 在您的元件中會寫成 <ul style={{ backgroundColor: 'black' }}>。

JavaScript 物件和大括號的更多樂趣

您可以將多個運算式移到一個物件中，並在大括號內在 JSX 中引用它們

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

在此範例中，person JavaScript 物件包含一個 name 字串和一個 theme 物件

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

元件可以像這樣使用 person 中的這些值

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSX 作為樣板語言非常簡潔，因為它允許您使用 JavaScript 組織資料和邏輯。

回顧

現在您幾乎了解了關於 JSX 的一切

  • 引號內的 JSX 屬性會作為字串傳遞。
  • 大括號可讓您將 JavaScript 邏輯和變數帶入您的標記中。
  • 它們可以在 JSX 標籤內容內使用，或緊接在屬性中的 = 之後使用。
  • {{ 和 }} 不是特殊語法：它是一個位於 JSX 大括號內的 JavaScript 物件。

嘗試一些挑戰

挑戰 1共 3:
修正錯誤

這段程式碼當機，並顯示錯誤訊息 物件不是有效的 React 子項

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

您可以找到問題嗎？

上一篇使用 JSX 撰寫標記
下一篇將 Props 傳遞給組件