@@ -32,17 +32,17 @@ export default function PackingList() {
32
32
< section>
33
33
< h1> Sally Ride' s Packing List</h1>
34
34
<ul>
35
- <Item
36
- isPacked={true}
37
- name="Space suit"
35
+ <Item
36
+ isPacked={true}
37
+ name="Space suit"
38
38
/>
39
- <Item
40
- isPacked={true}
41
- name="Helmet with a golden leaf"
39
+ <Item
40
+ isPacked={true}
41
+ name="Helmet with a golden leaf"
42
42
/>
43
- <Item
44
- isPacked={false}
45
- name="Photo of Tam"
43
+ <Item
44
+ isPacked={false}
45
+ name="Photo of Tam"
46
46
/>
47
47
</ul>
48
48
</section>
@@ -54,7 +54,7 @@ export default function PackingList() {
54
54
55
55
注意有些 `Item` component 的 `isPacked` prop 的值是 `true` 而非 `false`。而你想要在 `isPacked={true}` 的情況下,為已打包的項目加上一個勾號 (✔)。
56
56
57
- 你可以將此情境用以下 [`if`/`else` 陳述式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 來表示:
57
+ 你可以將此情境用以下 [`if`/`else` 陳述式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)來表示:
58
58
59
59
```js
60
60
if (isPacked) {
@@ -80,17 +80,17 @@ export default function PackingList() {
80
80
<section>
81
81
<h1>Sally Ride' s Packing List< / h1>
82
82
< ul>
83
- < Item
84
- isPacked= {true }
85
- name= " Space suit"
83
+ < Item
84
+ isPacked= {true }
85
+ name= " Space suit"
86
86
/ >
87
- < Item
88
- isPacked= {true }
89
- name= " Helmet with a golden leaf"
87
+ < Item
88
+ isPacked= {true }
89
+ name= " Helmet with a golden leaf"
90
90
/ >
91
- < Item
92
- isPacked= {false }
93
- name= " Photo of Tam"
91
+ < Item
92
+ isPacked= {false }
93
+ name= " Photo of Tam"
94
94
/ >
95
95
< / ul>
96
96
< / section>
@@ -106,7 +106,7 @@ export default function PackingList() {
106
106
107
107
### 條件式地使用 ` null ` 代表不回傳任何內容 {/* conditionally-returning-nothing-with-null* /}
108
108
109
- 在某些情況下,你可能不想 render 任何東西。舉例來說,你不想顯示任何已經打包好的項目,但 component 必須要有個回傳值。在這種情況下,你可以返回 ` null ` :
109
+ 在某些情況下,你可能不想 render 任何東西。舉例來說,你不想顯示任何已經打包好的項目,但 component 必須要有個回傳值。在這種情況下,你可以回傳 ` null ` :
110
110
111
111
``` js
112
112
if (isPacked) {
@@ -132,17 +132,17 @@ export default function PackingList() {
132
132
< section>
133
133
< h1> Sally Ride' s Packing List</h1>
134
134
<ul>
135
- <Item
136
- isPacked={true}
137
- name="Space suit"
135
+ <Item
136
+ isPacked={true}
137
+ name="Space suit"
138
138
/>
139
- <Item
140
- isPacked={true}
141
- name="Helmet with a golden leaf"
139
+ <Item
140
+ isPacked={true}
141
+ name="Helmet with a golden leaf"
142
142
/>
143
- <Item
144
- isPacked={false}
145
- name="Photo of Tam"
143
+ <Item
144
+ isPacked={false}
145
+ name="Photo of Tam"
146
146
/>
147
147
</ul>
148
148
</section>
@@ -236,17 +236,17 @@ export default function PackingList() {
236
236
<section>
237
237
<h1>Sally Ride' s Packing List< / h1>
238
238
< ul>
239
- < Item
240
- isPacked= {true }
241
- name= " Space suit"
239
+ < Item
240
+ isPacked= {true }
241
+ name= " Space suit"
242
242
/ >
243
- < Item
244
- isPacked= {true }
245
- name= " Helmet with a golden leaf"
243
+ < Item
244
+ isPacked= {true }
245
+ name= " Helmet with a golden leaf"
246
246
/ >
247
- < Item
248
- isPacked= {false }
249
- name= " Photo of Tam"
247
+ < Item
248
+ isPacked= {false }
249
+ name= " Photo of Tam"
250
250
/ >
251
251
< / ul>
252
252
< / section>
@@ -290,17 +290,17 @@ export default function PackingList() {
290
290
< section>
291
291
< h1> Sally Ride' s Packing List</h1>
292
292
<ul>
293
- <Item
294
- isPacked={true}
295
- name="Space suit"
293
+ <Item
294
+ isPacked={true}
295
+ name="Space suit"
296
296
/>
297
- <Item
298
- isPacked={true}
299
- name="Helmet with a golden leaf"
297
+ <Item
298
+ isPacked={true}
299
+ name="Helmet with a golden leaf"
300
300
/>
301
- <Item
302
- isPacked={false}
303
- name="Photo of Tam"
301
+ <Item
302
+ isPacked={false}
303
+ name="Photo of Tam"
304
304
/>
305
305
</ul>
306
306
</section>
@@ -333,7 +333,7 @@ export default function PackingList() {
333
333
let itemContent = name;
334
334
```
335
335
336
- 接著在 `isPacked` 的值為 `true` 時,使用 `if` 陳述式重新將 `itemContent` 的值指定為一個 JSX 表達式。
336
+ 接著在 `isPacked` 的值為 `true` 時,使用 `if` 陳述式重新將 `itemContent` 的值指定為一個 JSX 表達式。
337
337
338
338
```js
339
339
if (isPacked) {
@@ -371,17 +371,17 @@ export default function PackingList() {
371
371
<section>
372
372
<h1>Sally Ride' s Packing List< / h1>
373
373
< ul>
374
- < Item
375
- isPacked= {true }
376
- name= " Space suit"
374
+ < Item
375
+ isPacked= {true }
376
+ name= " Space suit"
377
377
/ >
378
- < Item
379
- isPacked= {true }
380
- name= " Helmet with a golden leaf"
378
+ < Item
379
+ isPacked= {true }
380
+ name= " Helmet with a golden leaf"
381
381
/ >
382
- < Item
383
- isPacked= {false }
384
- name= " Photo of Tam"
382
+ < Item
383
+ isPacked= {false }
384
+ name= " Photo of Tam"
385
385
/ >
386
386
< / ul>
387
387
< / section>
@@ -417,17 +417,17 @@ export default function PackingList() {
417
417
< section>
418
418
< h1> Sally Ride' s Packing List</h1>
419
419
<ul>
420
- <Item
421
- isPacked={true}
422
- name="Space suit"
420
+ <Item
421
+ isPacked={true}
422
+ name="Space suit"
423
423
/>
424
- <Item
425
- isPacked={true}
426
- name="Helmet with a golden leaf"
424
+ <Item
425
+ isPacked={true}
426
+ name="Helmet with a golden leaf"
427
427
/>
428
- <Item
429
- isPacked={false}
430
- name="Photo of Tam"
428
+ <Item
429
+ isPacked={false}
430
+ name="Photo of Tam"
431
431
/>
432
432
</ul>
433
433
</section>
@@ -474,17 +474,17 @@ export default function PackingList() {
474
474
<section>
475
475
<h1>Sally Ride' s Packing List< / h1>
476
476
< ul>
477
- < Item
478
- isPacked= {true }
479
- name= " Space suit"
477
+ < Item
478
+ isPacked= {true }
479
+ name= " Space suit"
480
480
/ >
481
- < Item
482
- isPacked= {true }
483
- name= " Helmet with a golden leaf"
481
+ < Item
482
+ isPacked= {true }
483
+ name= " Helmet with a golden leaf"
484
484
/ >
485
- < Item
486
- isPacked= {false }
487
- name= " Photo of Tam"
485
+ < Item
486
+ isPacked= {false }
487
+ name= " Photo of Tam"
488
488
/ >
489
489
< / ul>
490
490
< / section>
@@ -512,17 +512,17 @@ export default function PackingList() {
512
512
< section>
513
513
< h1> Sally Ride' s Packing List</h1>
514
514
<ul>
515
- <Item
516
- isPacked={true}
517
- name="Space suit"
515
+ <Item
516
+ isPacked={true}
517
+ name="Space suit"
518
518
/>
519
- <Item
520
- isPacked={true}
521
- name="Helmet with a golden leaf"
519
+ <Item
520
+ isPacked={true}
521
+ name="Helmet with a golden leaf"
522
522
/>
523
- <Item
524
- isPacked={false}
525
- name="Photo of Tam"
523
+ <Item
524
+ isPacked={false}
525
+ name="Photo of Tam"
526
526
/>
527
527
</ul>
528
528
</section>
@@ -560,17 +560,17 @@ export default function PackingList() {
560
560
<section>
561
561
<h1>Sally Ride' s Packing List< / h1>
562
562
< ul>
563
- < Item
564
- importance= {9 }
565
- name= " Space suit"
563
+ < Item
564
+ importance= {9 }
565
+ name= " Space suit"
566
566
/ >
567
- < Item
568
- importance= {0 }
569
- name= " Helmet with a golden leaf"
567
+ < Item
568
+ importance= {0 }
569
+ name= " Helmet with a golden leaf"
570
570
/ >
571
- < Item
572
- importance= {6 }
573
- name= " Photo of Tam"
571
+ < Item
572
+ importance= {6 }
573
+ name= " Photo of Tam"
574
574
/ >
575
575
< / ul>
576
576
< / section>
@@ -604,17 +604,17 @@ export default function PackingList() {
604
604
< section>
605
605
< h1> Sally Ride' s Packing List</h1>
606
606
<ul>
607
- <Item
608
- importance={9}
609
- name="Space suit"
607
+ <Item
608
+ importance={9}
609
+ name="Space suit"
610
610
/>
611
- <Item
612
- importance={0}
613
- name="Helmet with a golden leaf"
611
+ <Item
612
+ importance={0}
613
+ name="Helmet with a golden leaf"
614
614
/>
615
- <Item
616
- importance={6}
617
- name="Photo of Tam"
615
+ <Item
616
+ importance={6}
617
+ name="Photo of Tam"
618
618
/>
619
619
</ul>
620
620
</section>
0 commit comments