@@ -4,7 +4,7 @@ title: 列表 Rendering
4
4
5
5
<Intro >
6
6
7
- 你經常會需要用多個相似的 component 來顯示一系列的資料。這個時候你可以在 React 中使用 JavaScript 的 [ ` filter() ` ] ( https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter ) 和 [ ` map() ` ] ( https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map ) 來過濾資料並轉換成包含多個 component 的 array 。
7
+ 你經常會需要用多個相似的 component 來顯示一系列的資料。這個時候你可以在 React 中使用 JavaScript 的 [ ` filter() ` ] ( https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter ) 和 [ ` map() ` ] ( https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map ) 來過濾資料並轉換成包含多個 component 的 array。
8
8
9
9
</Intro >
10
10
@@ -32,8 +32,8 @@ title: 列表 Rendering
32
32
33
33
在這個列表唯一的差異就在於各個內容和資料。當你建立介面時,常常需要使用不同資料顯示相同的 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 列表。
34
34
35
-
36
35
這裡有個使用 array 產生一個列表項目的簡單範例:
36
+
37
37
1 . 將資料** 移入** 陣列:
38
38
39
39
``` js
@@ -45,6 +45,7 @@ const people = [
45
45
' Subrahmanyan Chandrasekhar: astrophysicist'
46
46
];
47
47
```
48
+
48
49
2 . 對 ` people ` 成員進行 ** Map** ,以建立新的 JSX 節點 array,` listItems ` :
49
50
50
51
``` js
@@ -112,11 +113,9 @@ const people = [{
112
113
name: ' Mohammad Abdus Salam' ,
113
114
profession: ' physicist' ,
114
115
}, {
115
- id: 3 ,
116
116
name: ' Percy Lavon Julian' ,
117
- profession: ' chemist' ,
117
+ profession: ' chemist' ,
118
118
}, {
119
- id: 4 ,
120
119
name: ' Subrahmanyan Chandrasekhar' ,
121
120
profession: ' astrophysicist' ,
122
121
}];
@@ -126,15 +125,15 @@ const people = [{
126
125
127
126
你只想要 ` profession ` 為 ` 'chemist' ` 的項目。此「測試」函式看起來像 ` (person) => person.profession === 'chemist' ` 。以下是如何將它們組合起來的方式:
128
127
129
- 1 . 透過在 ` people ` 上呼叫 ` filter() ` 以 ` person.profession === 'chemist' ` 為過濾條件,** 建立** 一個僅包含「化學家」的新 array ` chemists ` :
128
+ 1 . 透過在 ` people ` 上呼叫 ` filter() ` 以 ` person.profession === 'chemist' ` 為過濾條件,** 建立** 一個僅包含「化學家」的新 ` chemists ` array :
130
129
131
130
``` js
132
131
const chemists = people .filter (person =>
133
132
person .profession === ' chemist'
134
133
);
135
134
```
136
135
137
- 2 . 現在對 ` chemists` 進行 ` map() ` :
136
+ 2 . 現在對 ` chemists ` 進行 ` map() ` :
138
137
139
138
``` js {1,13}
140
139
const listItems = chemists .map (person =>
@@ -152,7 +151,7 @@ const listItems = chemists.map(person =>
152
151
);
153
152
```
154
153
155
- 3 . 最後,從你的 component 中** 回傳** ` listItems ` :
154
+ 3 . 最後,從你的 component 中** 回傳** ` listItems ` :
156
155
157
156
``` js
158
157
return < ul> {listItems}< / ul> ;
@@ -231,9 +230,9 @@ export function getImageUrl(person) {
231
230
232
231
``` css
233
232
ul { list-style-type : none ; padding : 0px 10px ; }
234
- li {
235
- margin-bottom : 10px ;
236
- display : grid ;
233
+ li {
234
+ margin-bottom : 10px ;
235
+ display : grid ;
237
236
grid-template-columns : auto 1fr ;
238
237
gap : 20px ;
239
238
align-items : center ;
@@ -249,7 +248,7 @@ img { width: 100px; height: 100px; border-radius: 50%; }
249
248
250
249
``` js
251
250
const listItems = chemists .map (person =>
252
- < li> ... < / li> // 隱式回傳 !
251
+ < li> ... < / li> // Implicit return !
253
252
);
254
253
```
255
254
@@ -361,9 +360,9 @@ export function getImageUrl(person) {
361
360
362
361
``` css
363
362
ul { list-style-type : none ; padding : 0px 10px ; }
364
- li {
365
- margin-bottom : 10px ;
366
- display : grid ;
363
+ li {
364
+ margin-bottom : 10px ;
365
+ display : grid ;
367
366
grid-template-columns : auto 1fr ;
368
367
gap : 20px ;
369
368
align-items : center ;
@@ -377,7 +376,7 @@ img { width: 100px; height: 100px; border-radius: 50%; }
377
376
378
377
#### 為每個列表顯示多個 DOM nodes {/* displaying-several-dom-nodes-for-each-list-item* /}
379
378
380
- 如果你想讓每個列表項目都 render 多個 DOM nodes 而不是一個的話,你該怎麼做?
379
+ 如果你想讓每個列表項目都 render 多個 DOM nodes 而不是一個的話,你該怎麼做?
381
380
382
381
[ ` <>...</> ` Fragment] ( /reference/react/Fragment ) 簡短的語法沒有辦法賦予 key 值,所以你只能使用 ` <div> ` 將內容包起來,或是使用長一點且更明確的 [ ` <Fragment> ` ] ( /reference/react/Fragment#rendering-a-list-of-fragments ) 語法
383
382
@@ -403,18 +402,19 @@ Fragments 不會顯示在 DOM 上,所以這串程式碼換轉換成 `<h1>`、`
403
402
不同的資料來源提供不同的 keys:
404
403
405
404
* ** 來自資料庫的資料:** 如果你的資料是來自於資料庫,你可以使用資料庫的 keys/IDs ,它們本身就具有唯一性。
406
- * ** 本機產生的資料:** 如果你資料的產生和儲存都在本機 (例如筆記軟體的筆記),那麼你可使用計數器、 [ ` crypto.randomUUID() ` ] ( https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID ) 或是像 [ ` uuid ` ] ( https://www.npmjs.com/package/uuid ) 的套件來產生這些 key 值。
405
+ * ** 本機產生的資料:** 如果你資料的產生和儲存都在本機 (例如筆記軟體的筆記),那麼你可使用計數器、[ ` crypto.randomUUID() ` ] ( https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID ) 或是像 [ ` uuid ` ] ( https://www.npmjs.com/package/uuid ) 的套件來產生這些 key 值。
407
406
408
407
### Key 的規則 {/* rules-of-keys* /}
409
408
410
409
* ** Siblings 之間的 key 必須是唯一的。** 然而,在_不同_的 array 中使用相同的 key,對於 JSX node 是可以的。
411
- * ** Key 不能改變** 否則就失去使用它的意義!所以不要在 rendering 時動態產生它們。
410
+ * ** Key 不能改變** 否則就失去使用它的意義!所以不要在 rendering 時動態產生它們。
412
411
413
- ### 為什麼 React 需要 key? {/* why-does-react-need-keys* /}
412
+ ### 為什麼 React 需要 key? {/* why-does-react-need-keys* /}
414
413
415
414
想像你的桌面上沒有檔案名稱。相反的,而是按順序來區分它們 -- 第一個檔案、第二個檔案等等。你可能會慢慢習慣,但一旦刪除了檔案,就會變得很混亂。第二個檔案就會變成第一個檔案,第三個檔案就會變成第二個檔案,以此類推。
416
415
417
416
在資料夾中的檔案名稱和 array 中的 JSX key 有類似的功能。它們讓我們可以在 siblings 之間識別一個項目。一個選擇得當的 key 提供的訊息比array 中的索引來得更好。即使_位置_由於重新排序而改變,` key ` 也可以讓 React 在其生命週期中識別該項目。
417
+
418
418
<Pitfall >
419
419
420
420
你可能會想用 array 中的索引值來當作 ` key ` 值,實際上,當你沒有指定 ` key ` 值時,React 會使用它。但是,如果插入、刪除項目或重新排序 array,你 render 項目的順序將會改變。索引作為 key 往往會導致微妙且令人困惑的錯誤。
@@ -888,7 +888,7 @@ img { width: 100px; height: 100px; border-radius: 50%; }
888
888
889
889
<Hint >
890
890
891
- 這裡會需要使用兩層巢狀的` map ` 呼叫。
891
+ 這裡會需要使用兩層巢狀的 ` map ` 呼叫。
892
892
893
893
</Hint >
894
894
@@ -1086,7 +1086,7 @@ export const recipes = [{
1086
1086
1087
1087
#### 帶有分隔線的列表 {/* list-with-a-separator* /}
1088
1088
1089
- 這個範例展示了葛飾北斎一首著名的俳句,它的每一行都由 ` <p> ` 標籤包覆。你需要在段落之間插入分隔線,結果大概會像這個樣子:
1089
+ 這個範例展示了葛飾北斎一首著名的俳句,它的每一行都由 ` <p> ` 標籤包覆。你需要在段落之間插入分隔線,結果大概會像這個樣子:
1090
1090
1091
1091
``` js
1092
1092
< article>
@@ -1208,8 +1208,8 @@ hr {
1208
1208
1209
1209
原本使用詩句索引值作為 ` key ` 的方法已經行不通了,因爲現在 array 裡同時包含了分隔線和詩句。但是,你可以用加入後綴的方式給它們賦予獨一無二的 ` key ` 值,像是 ` key={i + '-text'} ` 這樣。
1210
1210
1211
-
1212
1211
或著,你可以生產一個 fragment 包含 ` <hr /> ` 和 ` <p>...</p> ` ,但因為 fragment 簡寫 ` <>...</> ` 不支援設定 ` key ` ,所以你需要寫成 ` <Fragment> ` 形式。
1212
+
1213
1213
<Sandpack >
1214
1214
1215
1215
``` js
0 commit comments