Skip to content

Commit 616ef4f

Browse files
committed
fix: translation error
1 parent d55b0ab commit 616ef4f

File tree

1 file changed

+26
-26
lines changed

1 file changed

+26
-26
lines changed

beta/src/content/learn/javascript-in-jsx-with-curly-braces.md

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ JSX 讓你在 JavaScript 文件中撰寫類似 HTML 標籤的程式碼,使渲
1717

1818
</YouWillLearn>
1919

20-
## 使用引號傳遞 strings {/*passing-strings-with-quotes*/}
20+
## 使用引號傳遞 string {/*passing-strings-with-quotes*/}
2121

2222
當你想向 JSX 傳遞一個 string attribute 時,你要把它放在單引號或雙引號中:
2323

@@ -41,9 +41,9 @@ export default function Avatar() {
4141

4242
</Sandpack>
4343

44-
在這裡,`"https://i.imgur.com/7vQD0fPs.jpg"``"Gregorio Y. Zara"` 被作為 string 轉遞
44+
在這裡,`"https://i.imgur.com/7vQD0fPs.jpg"``"Gregorio Y. Zara"` 被作為 string 傳遞
4545

46-
但是如果你想動態地指定 `src``alt` 文本呢**你可以替換`"``"``{``}`以使用 JavaScript 中的值**
46+
但是如果你想動態地指定 `src``alt` 內容呢**你可以替換`"``"``{``}`來使用 JavaScript 中的值**
4747

4848
<Sandpack>
4949

@@ -67,11 +67,11 @@ export default function Avatar() {
6767

6868
</Sandpack>
6969

70-
注意 `className="avatar"``src={avatar}` 之間的區別,前者指定了一個 `"avatar"` 的CSS類名,使圖片變成圓形,而後者讀取了 JavaScript 變量 `avatar` 的值。這是因為大括號可以讓你在標籤中使用 JavaScript!
70+
注意 `className="avatar"``src={avatar}` 之間的區別,前者指定了一個 `"avatar"` 的 CSS classname,使圖片變成圓形,而後者讀取了 JavaScript 變量 `avatar` 變數的值。這是因為大括號可以讓你在標籤中使用 JavaScript
7171

7272
## 使用大括號: 進入 JavaScript 世界的窗口 {/*using-curly-braces-a-window-into-the-javascript-world*/}
7373

74-
JSX 是編寫 JavaScript 的一種特殊方式。這意味著可以在它裡面透過大括號 `{ }` 使用 JavaScript 。下面的例子首先聲明了一位科學家的名字 `name` ,然後用大括號將其嵌入 `<h1>` 內:
74+
JSX 是編寫 JavaScript 的一種特殊方式。這意味著可以在它裡面透過大括號 `{ }` 使用 JavaScript。下面的範例首先宣告了一位科學家的名字 `name` ,然後用大括號將其嵌入 `<h1>` 內:
7575

7676
<Sandpack>
7777

@@ -88,7 +88,7 @@ export default function TodoList() {
8888
8989
試著把 `name` 的值從 `Gregorio Y. Zara` 改為 `Hedy Lamarr`。看到待辦事項列表的標題如何變化了嗎?
9090
91-
任何的 JavaScript 表達式都可以在大括號之間使用,包括像 `formatDate()` 這樣的函式呼叫
91+
任何的 JavaScript 表達式都可以在大括號之間使用,包括呼叫像是 `formatDate()` 的函式
9292
9393
<Sandpack>
9494
@@ -115,14 +115,14 @@ export default function TodoList() {
115115
116116
你只能在 JSX 中以兩種方式使用大括號。
117117
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}"`。
120120
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*/}
122122
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 }}`。
124124
125-
你可能會在 JSX 中看到這種內聯 CSS 樣式。 React 並不要求你使用內聯樣式(CSS類在大多數情況下效果很好)。但是當你需要一個內聯樣式時,你要向 `style` attribute 傳遞一個 object:
125+
你可能會在 JSX 中看到這種 inline CSS 樣式。 React 並不要求你使用 inline 樣式(CSS class 在大多數情況下運作的很好)。但是當你需要一個 inline 樣式時,你要向 `style` attribute 傳遞一個 object:
126126
127127
<Sandpack>
128128
@@ -161,17 +161,17 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
161161
}>
162162
```
163163
164-
下次你在JSX中看到 `{{` 和 `}}` 的時候,要知道它只不過是 JSX 大括號中的一個 object 而已!
164+
下次你在 JSX 中看到 `{{` 和 `}}` 的時候,要知道它只不過是 JSX 大括號中的一個 object 而已!
165165
166166
<Pitfall>
167167
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' }}>`。
169169
170170
</Pitfall>
171171
172-
## 更多關於 JavaScript object 和大括號的樂趣 {/*more-fun-with-javascript-objects-and-curly-braces*/}
172+
## 更多關於有趣的 JavaScript object 和大括號 {/*more-fun-with-javascript-objects-and-curly-braces*/}
173173
174-
你可以把幾個表達式移到一個對像中,並在你的 JSX 中使用大括號引用它們。
174+
你可以把幾個表達式移到一個 object 中,並在你的 JSX 中使用大括號引用它們。
175175
176176
<Sandpack>
177177
@@ -223,22 +223,22 @@ const person = {
223223
};
224224
```
225225

226-
該組件可以像這樣使用這些來自 `person` 的值。
226+
該 component 可以像這樣使用這些來自 `person` 的值。
227227

228228
```js
229229
<div style={person.theme}>
230230
<h1>{person.name}'s Todos</h1>
231231
```
232232
233-
JSX 是非常簡潔的模板語言,因為它允許使用 JavaScript 來組織數據和邏輯
233+
JSX 是非常簡潔的模板語言,因為它允許使用 JavaScript 來組織資料和邏輯
234234
235235
<Recap>
236236
237237
現在你已經幾乎了解 JSX 的所有內容:
238238
239-
* 在引號內的 JSX attributes 被傳遞為字符串
240-
* 大括號可以讓你將 JavaScript 邏輯和變量帶入標籤中
241-
* 它們可以在 JSX 標籤內容內部或在屬性中的 = 後立即使用。
239+
* 在引號內的 JSX attributes 被傳遞為 string
240+
* 大括號可以讓你將 JavaScript 邏輯和變數帶入標籤中
241+
* 它們可以在 JSX 標籤內容內部或在屬性中的 `=` 後立即使用。
242242
* `{{` 和 `}}` 不是特殊的語法:它是一個被包含在 JSX 大括號內的 JavaScript object。
243243
244244
</Recap>
@@ -247,7 +247,7 @@ JSX 是非常簡潔的模板語言,因為它允許使用 JavaScript 來組織
247247
248248
#### 糾正錯誤 {/*fix-the-mistake*/}
249249
250-
這段代碼會崩潰並報錯 `Objects are not valid as a React child`:
250+
這段代碼會崩潰並報錯 `Objects are not valid as a React child`
251251
252252
<Sandpack>
253253
@@ -293,7 +293,7 @@ body > div > div { padding: 20px; }
293293

294294
<Solution>
295295

296-
發生這種情況是因為這個例子將*一個 object 本身*渲染到標籤中,而不是一個字符串`<h1>{person}'s Todos</h1>` 將試圖渲染整個 `person` object! 使用原始對像作為文本內容會拋出一個錯誤,因為React不知道你想如何顯示它們
296+
發生這種情況是因為這個例子將*一個 object 本身*渲染到標籤中,而不是一個 string`<h1>{person}'s Todos</h1>` 將試圖渲染整個 `person` object! 使用原始 object 作為文本內容會拋出一個錯誤,因為 React 不知道你想如何顯示它們
297297

298298
要解決這個問題,將 `<h1>{person}'s Todos</h1>` 改為 `<h1>{person.name}'s Todos</h1>`
299299

@@ -337,9 +337,9 @@ body > div > div { padding: 20px; }
337337
338338
</Solution>
339339
340-
#### 將信息提取到一個對像中 {/*extract-information-into-an-object*/}
340+
#### 將信息提取到一個 object {/*extract-information-into-an-object*/}
341341
342-
將圖片的 URL 提取到 `person` 對像中
342+
將圖片的 URL 提取到 `person` object 中
343343
344344
<Sandpack>
345345
@@ -426,9 +426,9 @@ body > div > div { padding: 20px; }
426426
427427
#### 在 JSX 的大括號中寫表達式 {/*write-an-expression-inside-jsx-curly-braces*/}
428428
429-
在下面的對像中,完整的圖片 URL 被分成四個部分:base URL、`imageId`、`imageSize` 和文件擴展名
429+
在下面的 object 中,完整的圖片 URL 被分成四個部分:base URL、`imageId`、`imageSize` 和和文件副檔名
430430
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` 指定方式存在問題。
432432

433433
你能修正它嗎?
434434

0 commit comments

Comments
 (0)