You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/Fragment.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,7 +19,7 @@ title: <Fragment> (<>...</>)
19
19
20
20
---
21
21
22
-
## Tham khảo {/*tham-khảo*/}
22
+
## Tham khảo {/*reference*/}
23
23
24
24
### `<Fragment>` {/*fragment*/}
25
25
@@ -29,17 +29,17 @@ title: <Fragment> (<>...</>)
29
29
30
30
-`key`**tuỳ chọn** : Các Fragment được khai báo bằng cú pháp rõ ràng `<Fragment>` có thể có [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
31
31
32
-
#### Những lưu ý {/*những-lưu-ý*/}
32
+
#### Những lưu ý {/*caveats*/}
33
33
34
34
- Nếu bạn muốn truyền `key` vào một Fragment, bạn không thể sử dụng cú pháp `<>...</>`. Bạn phải import rõ ràng `Fragment` từ `'react'` và render `<Fragment key={yourKey}>...</Fragment>`.
35
35
36
36
- React không [đặt lại state](/learn/preserving-and-resetting-state) khi bản chuyển từ việc render `<><Child /></>` sang `[<Child />]` hay ngược lại, hoặc khi bạn chuyển từ render `<><Child /></>` sang `<Child />` và ngược lại. Điều này chỉ hoạt động chính xác ở mức độ một cấp: ví dụ, từ `<><><Child /></></>` sang `<Child />` sẽ đặt lại state. Xem cụ thể về cách hoạt động [ở đây.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
37
37
38
38
---
39
39
40
-
## Cách sử dụng {/*cách-sử-dụng*/}
40
+
## Cách sử dụng {/*usage*/}
41
41
42
-
### Trả về nhiều phần tử {/*trả-về-nhiều-phần-tử*/}
42
+
### Trả về nhiều phần tử {/*returning-multiple-elements*/}
43
43
44
44
Sử dụng `Fragment`, hoặc cú pháp tương đương `<>...</>`, để nhóm các phần tử lại với nhau. Bạn có thể sử dụng Fragment để đặt nhiều phần tử vào bất kỳ nơi nào mà một phần tử đơn lẻ có thể được sử dụng. Ví dụ, một thành phần chỉ có thể trả về một phần tử, nhưng bằng cách sử dụng Fragment, bạn có thể nhóm nhiều phần tử lại với nhau và sau đó trả về chúng như một nhóm.:
45
45
@@ -94,7 +94,7 @@ function PostBody({ body }) {
94
94
95
95
<DeepDive>
96
96
97
-
#### Làm thế nào để viết Fragment mà không cần cú pháp đặc biệt? {/*làm-thế-nào-để-viết-fragment-mà-không-cần-cú-pháp-đặc-biệt*/}
97
+
#### Làm thế nào để viết Fragment mà không cần cú pháp đặc biệt? {/*how-to-write-a-fragment-without-the-special-syntax*/}
98
98
99
99
Câu ví dụ trên tương đương với việc import `Fragment` từ React:
100
100
@@ -117,7 +117,7 @@ Thông thường bạn sẽ không cần phải làm thế này trừ khi bạn
117
117
118
118
---
119
119
120
-
### Gán nhiều phần tử vào một biến {/*gán-nhiều-phần-tử-vào-một-biến*/}
120
+
### Gán nhiều phần tử vào một biến {/*assigning-multiple-elements-to-a-variable*/}
121
121
122
122
Như mọi phần tử khác, bạn có thể gán các phần tử Fragment vào các biến, truyền chúng như props, và hơn thế nữa:
123
123
@@ -139,7 +139,7 @@ function CloseDialog() {
139
139
140
140
---
141
141
142
-
### Nhóm các phần tử với văn bản {/*nhóm-các-phần-tử-với-văn-bản*/}
142
+
### Nhóm các phần tử với văn bản {/*grouping-elements-with-text*/}
143
143
144
144
Bạn có thể dùng `Fragment` để nhóm các văn bản với các thành phần:
0 commit comments