Skip to content

Commit 91021d9

Browse files
chore: wording
Signed-off-by: Jie Peng <[email protected]>
1 parent 7e85ebd commit 91021d9

File tree

1 file changed

+102
-102
lines changed

1 file changed

+102
-102
lines changed

src/content/learn/conditional-rendering.md

Lines changed: 102 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,17 @@ export default function PackingList() {
3232
<section>
3333
<h1>Sally Ride's Packing List</h1>
3434
<ul>
35-
<Item
36-
isPacked={true}
37-
name="Space suit"
35+
<Item
36+
isPacked={true}
37+
name="Space suit"
3838
/>
39-
<Item
40-
isPacked={true}
41-
name="Helmet with a golden leaf"
39+
<Item
40+
isPacked={true}
41+
name="Helmet with a golden leaf"
4242
/>
43-
<Item
44-
isPacked={false}
45-
name="Photo of Tam"
43+
<Item
44+
isPacked={false}
45+
name="Photo of Tam"
4646
/>
4747
</ul>
4848
</section>
@@ -54,7 +54,7 @@ export default function PackingList() {
5454
5555
注意有些 `Item` component 的 `isPacked` prop 的值是 `true` 而非 `false`。而你想要在 `isPacked={true}` 的情況下,為已打包的項目加上一個勾號 (✔)。
5656
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)來表示:
5858
5959
```js
6060
if (isPacked) {
@@ -80,17 +80,17 @@ export default function PackingList() {
8080
<section>
8181
<h1>Sally Ride's Packing List</h1>
8282
<ul>
83-
<Item
84-
isPacked={true}
85-
name="Space suit"
83+
<Item
84+
isPacked={true}
85+
name="Space suit"
8686
/>
87-
<Item
88-
isPacked={true}
89-
name="Helmet with a golden leaf"
87+
<Item
88+
isPacked={true}
89+
name="Helmet with a golden leaf"
9090
/>
91-
<Item
92-
isPacked={false}
93-
name="Photo of Tam"
91+
<Item
92+
isPacked={false}
93+
name="Photo of Tam"
9494
/>
9595
</ul>
9696
</section>
@@ -106,7 +106,7 @@ export default function PackingList() {
106106

107107
### 條件式地使用 `null` 代表不回傳任何內容 {/*conditionally-returning-nothing-with-null*/}
108108

109-
在某些情況下,你可能不想 render 任何東西。舉例來說,你不想顯示任何已經打包好的項目,但 component 必須要有個回傳值。在這種情況下,你可以返回 `null`
109+
在某些情況下,你可能不想 render 任何東西。舉例來說,你不想顯示任何已經打包好的項目,但 component 必須要有個回傳值。在這種情況下,你可以回傳 `null`
110110

111111
```js
112112
if (isPacked) {
@@ -132,17 +132,17 @@ export default function PackingList() {
132132
<section>
133133
<h1>Sally Ride's Packing List</h1>
134134
<ul>
135-
<Item
136-
isPacked={true}
137-
name="Space suit"
135+
<Item
136+
isPacked={true}
137+
name="Space suit"
138138
/>
139-
<Item
140-
isPacked={true}
141-
name="Helmet with a golden leaf"
139+
<Item
140+
isPacked={true}
141+
name="Helmet with a golden leaf"
142142
/>
143-
<Item
144-
isPacked={false}
145-
name="Photo of Tam"
143+
<Item
144+
isPacked={false}
145+
name="Photo of Tam"
146146
/>
147147
</ul>
148148
</section>
@@ -236,17 +236,17 @@ export default function PackingList() {
236236
<section>
237237
<h1>Sally Ride's Packing List</h1>
238238
<ul>
239-
<Item
240-
isPacked={true}
241-
name="Space suit"
239+
<Item
240+
isPacked={true}
241+
name="Space suit"
242242
/>
243-
<Item
244-
isPacked={true}
245-
name="Helmet with a golden leaf"
243+
<Item
244+
isPacked={true}
245+
name="Helmet with a golden leaf"
246246
/>
247-
<Item
248-
isPacked={false}
249-
name="Photo of Tam"
247+
<Item
248+
isPacked={false}
249+
name="Photo of Tam"
250250
/>
251251
</ul>
252252
</section>
@@ -290,17 +290,17 @@ export default function PackingList() {
290290
<section>
291291
<h1>Sally Ride's Packing List</h1>
292292
<ul>
293-
<Item
294-
isPacked={true}
295-
name="Space suit"
293+
<Item
294+
isPacked={true}
295+
name="Space suit"
296296
/>
297-
<Item
298-
isPacked={true}
299-
name="Helmet with a golden leaf"
297+
<Item
298+
isPacked={true}
299+
name="Helmet with a golden leaf"
300300
/>
301-
<Item
302-
isPacked={false}
303-
name="Photo of Tam"
301+
<Item
302+
isPacked={false}
303+
name="Photo of Tam"
304304
/>
305305
</ul>
306306
</section>
@@ -333,7 +333,7 @@ export default function PackingList() {
333333
let itemContent = name;
334334
```
335335
336-
接著在 `isPacked` 的值為 `true` 時,使用 `if` 陳述式重新將 `itemContent` 的值指定為一個 JSX 表達式。
336+
接著在 `isPacked` 的值為 `true` 時,使用 `if` 陳述式重新將 `itemContent` 的值指定為一個 JSX 表達式。
337337
338338
```js
339339
if (isPacked) {
@@ -371,17 +371,17 @@ export default function PackingList() {
371371
<section>
372372
<h1>Sally Ride's Packing List</h1>
373373
<ul>
374-
<Item
375-
isPacked={true}
376-
name="Space suit"
374+
<Item
375+
isPacked={true}
376+
name="Space suit"
377377
/>
378-
<Item
379-
isPacked={true}
380-
name="Helmet with a golden leaf"
378+
<Item
379+
isPacked={true}
380+
name="Helmet with a golden leaf"
381381
/>
382-
<Item
383-
isPacked={false}
384-
name="Photo of Tam"
382+
<Item
383+
isPacked={false}
384+
name="Photo of Tam"
385385
/>
386386
</ul>
387387
</section>
@@ -417,17 +417,17 @@ export default function PackingList() {
417417
<section>
418418
<h1>Sally Ride's Packing List</h1>
419419
<ul>
420-
<Item
421-
isPacked={true}
422-
name="Space suit"
420+
<Item
421+
isPacked={true}
422+
name="Space suit"
423423
/>
424-
<Item
425-
isPacked={true}
426-
name="Helmet with a golden leaf"
424+
<Item
425+
isPacked={true}
426+
name="Helmet with a golden leaf"
427427
/>
428-
<Item
429-
isPacked={false}
430-
name="Photo of Tam"
428+
<Item
429+
isPacked={false}
430+
name="Photo of Tam"
431431
/>
432432
</ul>
433433
</section>
@@ -474,17 +474,17 @@ export default function PackingList() {
474474
<section>
475475
<h1>Sally Ride's Packing List</h1>
476476
<ul>
477-
<Item
478-
isPacked={true}
479-
name="Space suit"
477+
<Item
478+
isPacked={true}
479+
name="Space suit"
480480
/>
481-
<Item
482-
isPacked={true}
483-
name="Helmet with a golden leaf"
481+
<Item
482+
isPacked={true}
483+
name="Helmet with a golden leaf"
484484
/>
485-
<Item
486-
isPacked={false}
487-
name="Photo of Tam"
485+
<Item
486+
isPacked={false}
487+
name="Photo of Tam"
488488
/>
489489
</ul>
490490
</section>
@@ -512,17 +512,17 @@ export default function PackingList() {
512512
<section>
513513
<h1>Sally Ride's Packing List</h1>
514514
<ul>
515-
<Item
516-
isPacked={true}
517-
name="Space suit"
515+
<Item
516+
isPacked={true}
517+
name="Space suit"
518518
/>
519-
<Item
520-
isPacked={true}
521-
name="Helmet with a golden leaf"
519+
<Item
520+
isPacked={true}
521+
name="Helmet with a golden leaf"
522522
/>
523-
<Item
524-
isPacked={false}
525-
name="Photo of Tam"
523+
<Item
524+
isPacked={false}
525+
name="Photo of Tam"
526526
/>
527527
</ul>
528528
</section>
@@ -560,17 +560,17 @@ export default function PackingList() {
560560
<section>
561561
<h1>Sally Ride's Packing List</h1>
562562
<ul>
563-
<Item
564-
importance={9}
565-
name="Space suit"
563+
<Item
564+
importance={9}
565+
name="Space suit"
566566
/>
567-
<Item
568-
importance={0}
569-
name="Helmet with a golden leaf"
567+
<Item
568+
importance={0}
569+
name="Helmet with a golden leaf"
570570
/>
571-
<Item
572-
importance={6}
573-
name="Photo of Tam"
571+
<Item
572+
importance={6}
573+
name="Photo of Tam"
574574
/>
575575
</ul>
576576
</section>
@@ -604,17 +604,17 @@ export default function PackingList() {
604604
<section>
605605
<h1>Sally Ride's Packing List</h1>
606606
<ul>
607-
<Item
608-
importance={9}
609-
name="Space suit"
607+
<Item
608+
importance={9}
609+
name="Space suit"
610610
/>
611-
<Item
612-
importance={0}
613-
name="Helmet with a golden leaf"
611+
<Item
612+
importance={0}
613+
name="Helmet with a golden leaf"
614614
/>
615-
<Item
616-
importance={6}
617-
name="Photo of Tam"
615+
<Item
616+
importance={6}
617+
name="Photo of Tam"
618618
/>
619619
</ul>
620620
</section>

0 commit comments

Comments
 (0)