Skip to content

Commit c4a9778

Browse files
RomanRoman
authored andcommitted
fix: review wording
1 parent 3b8ade8 commit c4a9778

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

src/content/learn/rendering-lists.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@ title: 列表 Rendering
99
</Intro>
1010

1111
<YouWillLearn>
12+
1213
* 如何使用 JavaScript 的 `map()` 方法處理 array 資料 render component
1314
* 如何使用 JavaScript 的 `filter()` 方法處理 array 資料 render 特定的 component
1415
* 什麼時候使用及為什麼使用 React 中的 key
1516

1617
</YouWillLearn>
1718

1819
## 從 array 中 render 資料 {/*rendering-data-from-arrays*/}
19-
這裡有一個列表
20+
假設你有一個內容列表。
2021

2122
```js
2223
<ul>
@@ -28,11 +29,10 @@ title: 列表 Rendering
2829
</ul>
2930
```
3031

31-
在這個列表唯一的差異就在於各個內容和資料。在建立介面時,你會經常需要使用不同的資料顯示相同的 component instance:從是評論列表或是個人資料圖片庫。在這些情境下,你可以把需要用到的資料存入 JavaScript 的 object 或 array,並使用 [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)[`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 的方法來 render 一個 component 列表。
32+
在這個列表唯一的差異就在於各個內容和資料。當你建立介面時,常常需要使用不同資料顯示相同的 component,從評論列表到個人資料圖庫。在這些情況下,你可以將資料儲存在 JavaScript 的 object 和array 中,並使用 [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)[`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 的方法來 render 一個 component 列表。
3233

3334

3435
這裡有個使用 array 產生一個列表項目的簡單範例:
35-
3636
1. 將資料**移入**陣列:
3737

3838
```js
@@ -255,12 +255,12 @@ const listItems = chemists.map(person =>
255255
然而,**如果你的 `=>` 後面跟著 `{` 大括號,那你必須明確地撰寫 `return` 陳述式!**
256256

257257
```js
258-
const listItems = chemists.map(person => { // 大括號
258+
const listItems = chemists.map(person => { // Curly brace
259259
return <li>...</li>;
260260
});
261261
```
262262

263-
包含 `=> {` 的箭頭函式被稱為「區塊主體」。它們允許你撰寫超過一行的程式碼,但你*必須*自己撰寫 `return` 陳述式。如果你忘記了它,則不會回傳任何東西!
263+
包含 `=> {` 的箭頭函式被稱為「區塊主體函式」。它們讓你可以撰寫多行程式碼,但你*必須*自己撰寫 `return` 陳述式。如果你忘了寫,函式就不會回傳任何值!詳細說明可以參考[這裡](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body)
264264

265265
</Pitfall>
266266

0 commit comments

Comments
 (0)