@@ -17,7 +17,7 @@ JSX 讓你在 JavaScript 文件中撰寫類似 HTML 標籤的程式碼,使渲
17
17
18
18
</YouWillLearn >
19
19
20
- ## 使用引號傳遞 strings {/* passing-strings-with-quotes* /}
20
+ ## 使用引號傳遞 string {/* passing-strings-with-quotes* /}
21
21
22
22
當你想向 JSX 傳遞一個 string attribute 時,你要把它放在單引號或雙引號中:
23
23
@@ -41,9 +41,9 @@ export default function Avatar() {
41
41
42
42
</Sandpack >
43
43
44
- 在這裡,` "https://i.imgur.com/7vQD0fPs.jpg" ` 和 ` "Gregorio Y. Zara" ` 被作為 string 轉遞 。
44
+ 在這裡,` "https://i.imgur.com/7vQD0fPs.jpg" ` 和 ` "Gregorio Y. Zara" ` 被作為 string 傳遞 。
45
45
46
- 但是如果你想動態地指定 ` src ` 或 ` alt ` 文本呢 ?** 你可以替換` " ` 和` " ` 為` { ` 和` } ` ,以使用 JavaScript 中的值, **
46
+ 但是如果你想動態地指定 ` src ` 或 ` alt ` 內容呢 ?** 你可以替換` " ` 和` " ` 為` { ` 和` } ` ,來使用 JavaScript 中的值: **
47
47
48
48
<Sandpack >
49
49
@@ -67,11 +67,11 @@ export default function Avatar() {
67
67
68
68
</Sandpack >
69
69
70
- 注意 ` className="avatar" ` 和 ` src={avatar} ` 之間的區別,前者指定了一個 ` "avatar" ` 的CSS類名 ,使圖片變成圓形,而後者讀取了 JavaScript 變量 ` avatar ` 的值 。這是因為大括號可以讓你在標籤中使用 JavaScript!
70
+ 注意 ` className="avatar" ` 和 ` src={avatar} ` 之間的區別,前者指定了一個 ` "avatar" ` 的 CSS classname ,使圖片變成圓形,而後者讀取了 JavaScript 變量 ` avatar ` 變數的值 。這是因為大括號可以讓你在標籤中使用 JavaScript!
71
71
72
72
## 使用大括號: 進入 JavaScript 世界的窗口 {/* using-curly-braces-a-window-into-the-javascript-world* /}
73
73
74
- JSX 是編寫 JavaScript 的一種特殊方式。這意味著可以在它裡面透過大括號 ` { } ` 使用 JavaScript 。下面的例子首先聲明了一位科學家的名字 ` name ` ,然後用大括號將其嵌入 ` <h1> ` 內:
74
+ JSX 是編寫 JavaScript 的一種特殊方式。這意味著可以在它裡面透過大括號 ` { } ` 使用 JavaScript。下面的範例首先宣告了一位科學家的名字 ` name ` ,然後用大括號將其嵌入 ` <h1> ` 內:
75
75
76
76
<Sandpack >
77
77
@@ -88,7 +88,7 @@ export default function TodoList() {
88
88
89
89
試著把 `name` 的值從 `Gregorio Y. Zara` 改為 `Hedy Lamarr`。看到待辦事項列表的標題如何變化了嗎?
90
90
91
- 任何的 JavaScript 表達式都可以在大括號之間使用,包括像 `formatDate()` 這樣的函式呼叫 :
91
+ 任何的 JavaScript 表達式都可以在大括號之間使用,包括呼叫像是 `formatDate()` 的函式 :
92
92
93
93
<Sandpack>
94
94
@@ -115,14 +115,14 @@ export default function TodoList() {
115
115
116
116
你只能在 JSX 中以兩種方式使用大括號。
117
117
118
- 1. **作為文本 ** 直接在JSX標籤內使用 。 `<h1>{name}' s To Do List< / h1> ` 可以使用,但 ` < {tag}> Gregorio Y . Zara ' s To Do List</{tag}>` 就不行。
119
- 2. **作為 attributes** 緊隨 `=` 符號之後:`src={avatar}` 將讀取 `avatar` 變量 ,但 `src="{avatar}"` 將傳遞 string `"{avatar}"`。
118
+ 1. **作為文字 ** 直接在 JSX 標籤內使用 。 `<h1>{name}' s To Do List< / h1> ` 可以使用,但 ` < {tag}> Gregorio Y . Zara ' s To Do List</{tag}>` 就不行。
119
+ 2. **作為 attributes** 緊隨 `=` 符號之後:`src={avatar}` 將讀取 `avatar` 變數 ,但 `src="{avatar}"` 將傳遞 string `"{avatar}"`。
120
120
121
- ## 使用 "雙大括號 ":JSX 中的 CSS 和其他 object {/*using-double-curlies-css-and-other-objects-in-jsx*/}
121
+ ## 使用 "雙引號 ":JSX 中的 CSS 和其他 object {/*using-double-curlies-css-and-other-objects-in-jsx*/}
122
122
123
- 除了 strings、numbers 和其他 JavaScript 表達式外,你甚至可以在 JSX 中傳遞 object。對像也用大括號表示 ,如 `{ name: "Hedy Lamarr", inventions: 5 }` 。因此,要在JSX中傳遞一個 JS object,你必須用另一對大括號包裹該 object:`person={{ name: "Hedy Lamarr", inventions: 5 }}`。
123
+ 除了 string、number 和其他 JavaScript 表達式外,你甚至可以在 JSX 中傳遞 object。Object 也必須用大括號表示 ,如 `{ name: "Hedy Lamarr", inventions: 5 }` 。因此,要在 JSX 中傳遞一個 JS object,你必須用另一對大括號包裹該 object:`person={{ name: "Hedy Lamarr", inventions: 5 }}`。
124
124
125
- 你可能會在 JSX 中看到這種內聯 CSS 樣式。 React 並不要求你使用內聯樣式(CSS類在大多數情況下效果很好)。但是當你需要一個內聯樣式時 ,你要向 `style` attribute 傳遞一個 object:
125
+ 你可能會在 JSX 中看到這種 inline CSS 樣式。 React 並不要求你使用 inline 樣式(CSS class 在大多數情況下運作的很好)。但是當你需要一個 inline 樣式時 ,你要向 `style` attribute 傳遞一個 object:
126
126
127
127
<Sandpack>
128
128
@@ -161,17 +161,17 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
161
161
}>
162
162
```
163
163
164
- 下次你在JSX中看到 `{{` 和 `}}` 的時候,要知道它只不過是 JSX 大括號中的一個 object 而已!
164
+ 下次你在 JSX 中看到 `{{` 和 `}}` 的時候,要知道它只不過是 JSX 大括號中的一個 object 而已!
165
165
166
166
<Pitfall>
167
167
168
- 內聯的 `style` 屬性是用 camelCase 寫的。例如,HTML `<ul style="background-color: black">` 在你的 component 中應該寫成 `<ul style={{ backgroundColor: ' black' }}>`。
168
+ Inline 的 `style` 屬性是用 camelCase 寫的。例如,HTML `<ul style="background-color: black">` 在你的 component 中應該寫成 `<ul style={{ backgroundColor: ' black' }}>`。
169
169
170
170
</Pitfall>
171
171
172
- ## 更多關於 JavaScript object 和大括號的樂趣 {/*more-fun-with-javascript-objects-and-curly-braces*/}
172
+ ## 更多關於有趣的 JavaScript object 和大括號 {/*more-fun-with-javascript-objects-and-curly-braces*/}
173
173
174
- 你可以把幾個表達式移到一個對像中 ,並在你的 JSX 中使用大括號引用它們。
174
+ 你可以把幾個表達式移到一個 object 中 ,並在你的 JSX 中使用大括號引用它們。
175
175
176
176
<Sandpack>
177
177
@@ -223,22 +223,22 @@ const person = {
223
223
};
224
224
```
225
225
226
- 該組件可以像這樣使用這些來自 ` person ` 的值。
226
+ 該 component 可以像這樣使用這些來自 ` person ` 的值。
227
227
228
228
``` js
229
229
< div style= {person .theme }>
230
230
< h1> {person .name }' s Todos</h1>
231
231
```
232
232
233
- JSX 是非常簡潔的模板語言,因為它允許使用 JavaScript 來組織數據和邏輯 。
233
+ JSX 是非常簡潔的模板語言,因為它允許使用 JavaScript 來組織資料和邏輯 。
234
234
235
235
<Recap>
236
236
237
237
現在你已經幾乎了解 JSX 的所有內容:
238
238
239
- * 在引號內的 JSX attributes 被傳遞為字符串 。
240
- * 大括號可以讓你將 JavaScript 邏輯和變量帶入標籤中 。
241
- * 它們可以在 JSX 標籤內容內部或在屬性中的 = 後立即使用。
239
+ * 在引號內的 JSX attributes 被傳遞為 string 。
240
+ * 大括號可以讓你將 JavaScript 邏輯和變數帶入標籤中 。
241
+ * 它們可以在 JSX 標籤內容內部或在屬性中的 `=` 後立即使用。
242
242
* `{{` 和 `}}` 不是特殊的語法:它是一個被包含在 JSX 大括號內的 JavaScript object。
243
243
244
244
</Recap>
@@ -247,7 +247,7 @@ JSX 是非常簡潔的模板語言,因為它允許使用 JavaScript 來組織
247
247
248
248
#### 糾正錯誤 {/*fix-the-mistake*/}
249
249
250
- 這段代碼會崩潰並報錯 `Objects are not valid as a React child`:
250
+ 這段代碼會崩潰並報錯 `Objects are not valid as a React child`:
251
251
252
252
<Sandpack>
253
253
@@ -293,7 +293,7 @@ body > div > div { padding: 20px; }
293
293
294
294
<Solution >
295
295
296
- 發生這種情況是因為這個例子將* 一個 object 本身* 渲染到標籤中,而不是一個字符串 。 ` <h1>{person}'s Todos</h1> ` 將試圖渲染整個 ` person ` object! 使用原始對像作為文本內容會拋出一個錯誤,因為React不知道你想如何顯示它們 。
296
+ 發生這種情況是因為這個例子將* 一個 object 本身* 渲染到標籤中,而不是一個 string 。 ` <h1>{person}'s Todos</h1> ` 將試圖渲染整個 ` person ` object! 使用原始 object 作為文本內容會拋出一個錯誤,因為 React 不知道你想如何顯示它們 。
297
297
298
298
要解決這個問題,將 ` <h1>{person}'s Todos</h1> ` 改為 ` <h1>{person.name}'s Todos</h1> ` 。
299
299
@@ -337,9 +337,9 @@ body > div > div { padding: 20px; }
337
337
338
338
</Solution>
339
339
340
- #### 將信息提取到一個對像中 {/*extract-information-into-an-object*/}
340
+ #### 將信息提取到一個 object {/*extract-information-into-an-object*/}
341
341
342
- 將圖片的 URL 提取到 `person` 對像中 。
342
+ 將圖片的 URL 提取到 `person` object 中 。
343
343
344
344
<Sandpack>
345
345
@@ -426,9 +426,9 @@ body > div > div { padding: 20px; }
426
426
427
427
#### 在 JSX 的大括號中寫表達式 {/*write-an-expression-inside-jsx-curly-braces*/}
428
428
429
- 在下面的對像中 ,完整的圖片 URL 被分成四個部分:base URL、`imageId`、`imageSize` 和文件擴展名 。
429
+ 在下面的 object 中 ,完整的圖片 URL 被分成四個部分:base URL、`imageId`、`imageSize` 和和文件副檔名 。
430
430
431
- 我們希望將這些 attributes 組合在一起形成完整的圖片 URL:基礎 URL(始終為 `https://i.imgur.com/`)、`imageId`(`7vQD0fP`)、`imageSize`(`s`)和文件擴展名 (始終為 `.jpg`)。然而,下面 `<img>` 標籤的 src 指定方式存在問題。
431
+ 我們希望將這些 attributes 組合在一起形成完整的圖片 URL:基礎 URL(始終為 `' https: // i.imgur.com/' `)、`imageId`(`' 7vQD0fP' `)、`imageSize`(`'s'`)和和文件副檔名 (始終為 `'' .jpg' `)。然而,下面 `<img>` 標籤的 ` src` 指定方式存在問題。
432
432
433
433
你能修正它嗎?
434
434
0 commit comments