在 JSX 中使用 JavaScript 的語法
JSX 允許你在 JavaScript 文件中編寫類似 HTML 標籤的代碼,使渲染邏輯和內容保持在同樣的地方。有時你會想在標籤中添加一些 JavaScript 邏輯或引用一個動態屬性。在這種情況下,你可以在 JSX 中使用花括號來編寫 JavaScript 。
You will learn
- 如何使用引號傳遞 string
- 如何使用花括號在 JSX 中引用 JavaScript 變量
- 如何使用花括號在 JSX 中調用 JavaScript 函數
- 如何使用花括號在 JSX 中使用 JavaScript 對象
使用引號傳遞 strings
當你想向 JSX 傳遞一個 string attribute 時,你要把它放在單引號或雙引號中:
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"
被作為 strings 轉遞。
但是如果你想動態地指定 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"
和 src={avatar}
之間的區別,前者指定了一個 "avatar"
的CSS類名,使圖片變成圓形,而後者讀取了 JavaScript 變量 avatar
的值。這是因為花括號可以讓你在標籤中使用 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 中以兩種方式使用花括號。
- 作為文本直接在JSX標籤內使用。
<h1>{name}'s To Do List</h1>
可以使用,但<{tag}>Gregorio Y. Zara's To Do List</{tag}>
就不行。 - 作為 attributes 緊隨
=
符號之後:src={avatar}
將讀取avatar
變量,但src="{avatar}"
將傳遞 string"{avatar}"
。
使用 “雙花括號”:JSX 中的 CSS 和其他對象
除了 strings、numbers 和其他 JavaScript 表達式外,你甚至可以在 JSX 中傳遞對象。對像也用花括號表示,如 { name: "Hedy Lamarr", inventions: 5 }
。因此,要在JSX中傳遞一個 JS 對象,你必須用另一對花括號包裹該對象:person={{ name: "Hedy Lamarr", inventions: 5 }}
。
你可能會在 JSX 中看到這種內聯 CSS 樣式。 React 並不要求你使用內聯樣式(CSS類在大多數情況下效果很好)。但是當你需要一個內聯樣式時,你要向 style
attribute 傳遞一個對象:
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 花括號中的一個對象而已!
更多關於 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
string 和一個 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 來組織數據和邏輯。
Recap
現在你已經幾乎了解 JSX 的所有內容:
- 在引號內的 JSX attributes 被傳遞為字符串。
- 花括號可以讓你將 JavaScript 邏輯和變量帶入標籤中。
- 它們可以在 JSX 標籤內容內部或在屬性中的 = 後立即使用。
{{
和}}
不是特殊的語法:它是一個被包含在 JSX 花括號內的 JavaScript 對象。
Challenge 1 of 3: 糾正錯誤
這段代碼會崩潰並報錯 Objects are not valid as a React child
:
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> ); }
你能找到問題所在嗎?