JSX 中的 JavaScript 與大括號
JSX 讓您可以在 JavaScript 檔案中編寫類似 HTML 的標記，將渲染邏輯和內容保持在同一個地方。有時您會想要在該標記中添加一點 JavaScript 邏輯或引用動態屬性。在這種情況下，您可以在 JSX 中使用大括號來開啟一個通往 JavaScript 的窗口。
您將學習
- 如何使用引號傳遞字串
- 如何使用大括號在 JSX 內引用 JavaScript 變數
- 如何使用大括號在 JSX 內呼叫 JavaScript 函數
- 如何使用大括號在 JSX 內使用 JavaScript 物件
使用引號傳遞字串
當您想要將字串屬性傳遞給 JSX 時，請將其放在單引號或雙引號中：
這裡，"https://i.imgur.com/7vQD0fPs.jpg" 和 "Gregorio Y. Zara"是作為字串傳遞的。
但是，如果您想動態指定 src 或 alt文字呢？您可以透過將 " 和 "替換為{ 和 }來使用 JavaScript 中的值：
請注意 className="avatar"（它指定了一個使圖片變圓的 CSS 類別名稱"avatar"）和 src={avatar}（它讀取名為 avatar的 JavaScript 變數的值）之間的區別。這是因為大括號讓您可以直接在標記中使用 JavaScript！
使用大括號：通往 JavaScript 世界的窗口
JSX 是一種特殊的 JavaScript 寫法。這意味著可以在其中使用 JavaScript——使用大括號{ }。下面的範例首先宣告了科學家的名字 name，然後使用大括號將其嵌入到 <h1>中：
試著將 name 的值從 'Gregorio Y. Zara'更改為'Hedy Lamarr'。看到清單標題如何變化了嗎？
任何 JavaScript 表達式都可以在大括號之間使用，包括像formatDate()這樣的函數呼叫：
何處使用大括號
在 JSX 內部，您只能以兩種方式使用大括號：
- 作為文字，直接在 JSX 標籤內：
<h1>{name}'s To Do List</h1>可行，但<{tag}>Gregorio Y. Zara's To Do List</{tag}>則不行。 - 作為屬性，緊跟在
=符號之後：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 屬性：
試著更改 backgroundColor 和 color的值。
當你這樣寫的時候，你真的可以看到大括號內的 JavaScript 物件：
下次你在 JSX 中看到{{ 和 }}，要知道它只不過是 JSX 大括號內的一個物件！
陷阱
內聯 style屬性是以駝峰式大小寫書寫的。例如，HTML 中的<ul style="background-color: black">在你的元件中會寫成<ul style={{ backgroundColor: 'black' }}>。
更多關於 JavaScript 物件和大括號的樂趣
你可以將多個表達式移到一個物件中，並在大括號內的 JSX 中引用它們：
在這個例子中，personJavaScript 物件包含一個name字串和一個theme物件：
元件可以像這樣使用來自 person的值：
JSX 作為一種模板語言非常簡潔，因為它允許你使用 JavaScript 來組織資料和邏輯。
總結
現在你幾乎了解了關於 JSX 的一切：
- 引號內的 JSX 屬性會作為字串傳遞。
- 大括號讓你可以將 JavaScript 邏輯和變數帶入你的標記中。
- 它們可以在 JSX 標籤內容內部或緊接在屬性中的
=之後使用。 {{和}}不是特殊語法：它只是一個藏在 JSX 大括號內的 JavaScript 物件。