本篇筆記摘錄自官方文件 JavaScript in JSX with Curly Braces
上一篇筆記介紹了 JSX 是什麼，這篇來介紹一下如何在 JSX 中寫 JavaScript。
JSX 可以在 JavaScript 中使用像是 HTML ( HTML-like ) 的標記式語言，讓你可以在同一個檔案中撰寫渲染邏輯與內容。
如果想在標記式語言中寫一些 JavaScript 邏輯或是一些動態屬性，你會需要使用大括號{ }。
Passing strings with quotes
想要傳遞字串屬性到 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的內容文字，需要使用大括號來包覆它們：
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"與src={avatar}的區別：
前者是在img上指定一個 CSS class 名稱叫做"avatar"，後者則是讀取一個JavaScript 變數的值 ( value )，而這個變數的名稱叫做avatar。
上面的結論，源自於大括號的作用。
Using curly braces: A window into the JavaScript world
JSX 是一種特別的 JavaScript 撰寫方式，這代表我們可以在 JSX 裡使用JavaScript。
在下面的範例中，我們首先宣告了科學家的name，接著把它嵌入<h1>中：
( 將左側拉桿向右移動，可以看見程式碼的部分，拉開後點擊左上角三條線漢堡圖示可以看見完整檔案，右邊則為輸出結果。 )
試著將name的值從'Gregorio Y. Zara'改為'Hedy Lamarr'，會看到右側輸出結果上的改變。
任何 JavaScript 表達式 ( expression ) 在大括號中都是可以運作的，包含像是formatData()這樣的函式：
Where to use curly braces
在 JSX 裡，只有兩種方式可以使用大括號：
- 在 JSX tag 內的文字：
<h1>{name}'s To Do List</h1>是可以運作的，<{tag}>Gregorio Y. Zara's To Do List</{tag}>則不行。 - 直接接在
=後的屬性：src={avatar}會讀取名為avatar的變數，src="{avatar}"則會被視為字串"{avatar}"。
Using “double curlies”: CSS and other objects in JSX
JSX 也可以傳遞物件。
物件本來就使用大括號表示，像是：{ name: "Hedy Lamarr", inventions: 5 }，因此在 JSX 裡傳遞 JavaScript 物件時，我們會出現雙括號的情形，但其實只是物件的大括號加上 JSX 裡傳遞 JavaScript 所需的大括號。
因此會變成這樣：person = {{ name: "Hedy Lamarr", inventions: 5 }}。
在 JSX 中使用 inline CSS styles 也會是雙括號，因為我們是將一個物件傳遞到style屬性：
【 Pitfall 】
inline style的屬性需要用 camelCase 的方式撰寫。
舉例來說，HTML裡的<ul style="background-color: black">，在元件裡需要寫成<ul style={{ backgroundColor: 'black' }}>。
More fun with JavaScript objects and curly braces
你可以將多個表達式放進一個物件裡，然後在 JSX 裡使用大括號引用它們：
在這個範例裡，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>