@@ -54,13 +54,17 @@ export default function PackingList() {
54
54
55
55
</Sandpack >
56
56
57
+ <<<<<<< HEAD
57
58
需要注意的是,有些 ` Item ` 组件的 ` isPacked ` 属性是被设为 ` true ` 而不是 ` false ` 。你可以在那些满足 ` isPacked={true} ` 条件的物品旁加上一个勾选符号(✔)。
59
+ =======
60
+ Notice that some of the ` Item ` components have their ` isPacked ` prop set to ` true ` instead of ` false ` . You want to add a checkmark (✅) to packed items if ` isPacked={true} ` .
61
+ >>>>>>> a220bb3f21170210fb37375f349c943150a5364d
58
62
59
63
你可以用 [ if/else 语句] ( https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else ) 去判断:
60
64
61
65
``` js
62
66
if (isPacked) {
63
- return < li className= " item" > {name} ✔ < / li> ;
67
+ return < li className= " item" > {name} ✅ < / li> ;
64
68
}
65
69
return < li className= " item" > {name}< / li> ;
66
70
```
@@ -72,7 +76,7 @@ return <li className="item">{name}</li>;
72
76
``` js
73
77
function Item ({ name, isPacked }) {
74
78
if (isPacked) {
75
- return < li className= " item" > {name} ✔ < / li> ;
79
+ return < li className= " item" > {name} ✅ < / li> ;
76
80
}
77
81
return < li className= " item" > {name}< / li> ;
78
82
}
@@ -161,7 +165,7 @@ export default function PackingList() {
161
165
在之前的例子里,你在组件内部控制哪些 JSX 树(如果有的话!)会返回。你可能已经发现了在渲染输出里会有一些重复的内容:
162
166
163
167
``` js
164
- < li className= " item" > {name} ✔ < / li>
168
+ < li className= " item" > {name} ✅ < / li>
165
169
```
166
170
167
171
和下面的写法很像:
@@ -174,7 +178,7 @@ export default function PackingList() {
174
178
175
179
``` js
176
180
if (isPacked) {
177
- return < li className= " item" > {name} ✔ < / li> ;
181
+ return < li className= " item" > {name} ✅ < / li> ;
178
182
}
179
183
return < li className= " item" > {name}< / li> ;
180
184
```
@@ -189,7 +193,7 @@ JavaScript 有一种紧凑型语法来实现条件判断表达式——[条件
189
193
190
194
``` js
191
195
if (isPacked) {
192
- return < li className= " item" > {name} ✔ < / li> ;
196
+ return < li className= " item" > {name} ✅ < / li> ;
193
197
}
194
198
return < li className= " item" > {name}< / li> ;
195
199
```
@@ -199,12 +203,16 @@ return <li className="item">{name}</li>;
199
203
``` js
200
204
return (
201
205
< li className= " item" >
202
- {isPacked ? name + ' ✔ ' : name}
206
+ {isPacked ? name + ' ✅ ' : name}
203
207
< / li>
204
208
);
205
209
```
206
210
211
+ <<<<<<< HEAD
207
212
你可以认为,* “如果 ` isPacked ` 为 true 时,则(` ? ` )渲染 ` name + ' ✔' ` ,否则(` : ` )渲染 ` name ` 。”*
213
+ =======
214
+ You can read it as * "if ` isPacked ` is true, then (` ? ` ) render ` name + ' ✅' ` , otherwise (` : ` ) render ` name ` "* .
215
+ >>>>>>> a220bb3f21170210fb37375f349c943150a5364d
208
216
209
217
<DeepDive >
210
218
@@ -224,7 +232,7 @@ function Item({ name, isPacked }) {
224
232
< li className= " item" >
225
233
{isPacked ? (
226
234
< del>
227
- {name + ' ✔ ' }
235
+ {name + ' ✅ ' }
228
236
< / del>
229
237
) : (
230
238
name
@@ -267,7 +275,7 @@ export default function PackingList() {
267
275
``` js
268
276
return (
269
277
< li className= " item" >
270
- {name} {isPacked && ' ✔ ' }
278
+ {name} {isPacked && ' ✅ ' }
271
279
< / li>
272
280
);
273
281
```
@@ -282,7 +290,7 @@ return (
282
290
function Item ({ name, isPacked }) {
283
291
return (
284
292
< li className= " item" >
285
- {name} {isPacked && ' ✔ ' }
293
+ {name} {isPacked && ' ✅ ' }
286
294
< / li>
287
295
);
288
296
}
@@ -339,7 +347,7 @@ let itemContent = name;
339
347
340
348
``` js
341
349
if (isPacked) {
342
- itemContent = name + " ✔ " ;
350
+ itemContent = name + " ✅ " ;
343
351
}
344
352
```
345
353
@@ -359,7 +367,7 @@ if (isPacked) {
359
367
function Item ({ name, isPacked }) {
360
368
let itemContent = name;
361
369
if (isPacked) {
362
- itemContent = name + " ✔ " ;
370
+ itemContent = name + " ✅ " ;
363
371
}
364
372
return (
365
373
< li className= " item" >
@@ -403,7 +411,7 @@ function Item({ name, isPacked }) {
403
411
if (isPacked) {
404
412
itemContent = (
405
413
< del>
406
- {name + " ✔ " }
414
+ {name + " ✅ " }
407
415
< / del>
408
416
);
409
417
}
@@ -466,7 +474,7 @@ export default function PackingList() {
466
474
function Item ({ name, isPacked }) {
467
475
return (
468
476
< li className= " item" >
469
- {name} {isPacked && ' ✔ ' }
477
+ {name} {isPacked && ' ✅ ' }
470
478
< / li>
471
479
);
472
480
}
@@ -504,7 +512,7 @@ export default function PackingList() {
504
512
function Item ({ name, isPacked }) {
505
513
return (
506
514
< li className= " item" >
507
- {name} {isPacked ? ' ✔ ' : ' ❌' }
515
+ {name} {isPacked ? ' ✅ ' : ' ❌' }
508
516
< / li>
509
517
);
510
518
}
0 commit comments