Skip to content

Commit 5988367

Browse files
authored
Merge pull request #185 from qhuu2742/translate/addons-create-fragment.md
addons-create-fragment.md translate
2 parents 0422160 + 1385082 commit 5988367

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

content/docs/addons-create-fragment.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ layout: docs
66
category: Add-Ons
77
---
88

9-
> Note:
9+
> Chú ý:
1010
>
11-
> `React.addons` entry point is deprecated as of React v15.5. We now have first class support for fragments which you can read about [here](/docs/fragments.html).
11+
> `React.addons` entry point không được dùng kể từ React v15.5. Hiện đã có hỗ trợ tốt nhất, bạn có thể đọc thêm tại [đây](/docs/fragments.html).
1212
13-
## Importing {#importing}
13+
## Tiến hành triển khai {#importing}
1414

1515
```javascript
1616
import createFragment from 'react-addons-create-fragment'; // ES6
@@ -19,9 +19,9 @@ var createFragment = require('react-addons-create-fragment'); // ES5 with npm
1919

2020
## Overview {#overview}
2121

22-
In most cases, you can use the `key` prop to specify keys on the elements you're returning from `render`. However, this breaks down in one situation: if you have two sets of children that you need to reorder, there's no way to put a key on each set without adding a wrapper element.
22+
Trong hầu hết các trường hợp, bạn sẽ sử dụng `key` để hỗ trợ chỉ định các khóa trên các phần từ mà bạn đang trả về sau khi `render`. Tuy nhiên, điều này phá phỡ một trường hợp: nếu bạn có hai nhóm con cần sắp xếp lại, ta sẽ không có cách nào để đặt một khóa trên mỗi tập hợp mà không thêm một wrapper element.
2323

24-
That is, if you have a component such as:
24+
Nếu bạn có một component như sau:
2525

2626
```js
2727
function Swapper(props) {
@@ -35,13 +35,13 @@ function Swapper(props) {
3535
}
3636
```
3737

38-
The children will unmount and remount as you change the `swapped` prop because there aren't any keys marked on the two sets of children.
38+
Các nhóm con sẽ ngắt kết nối và liên kết lại khi bạn thay đổi `swapped` vì không có bất kỳ khóa nào được đánh dấu trên hai nhóm con.
3939

40-
To solve this problem, you can use the `createFragment` add-on to give keys to the sets of children.
40+
Để giải quyết vấn đề này, bạn có thể sử dụng `createFragment` để bổ sung khóa cho các nhóm con.
4141

4242
#### `Array<ReactNode> createFragment(object children)` {#arrayreactnode-createfragmentobject-children}
4343

44-
Instead of creating arrays, we write:
44+
Thay vì tạo mảng, chúng ta sẽ làm như sau:
4545

4646
```javascript
4747
import createFragment from 'react-addons-create-fragment';
@@ -63,6 +63,6 @@ function Swapper(props) {
6363
}
6464
```
6565

66-
The keys of the passed object (that is, `left` and `right`) are used as keys for the entire set of children, and the order of the object's keys is used to determine the order of the rendered children. With this change, the two sets of children will be properly reordered in the DOM without unmounting.
66+
Các khóa sẽ được truyền vào đối tượng (đấy là `left` `right`) được sử dụng để làm chìa khóa cho các nhóm con, và thứ tự các khóa của đối tượng được sử dụng để xác định thứ tự của các nhóm con được hiển thị. Với thay đổi này, hai nhóm con sẽ được sắp xếp lại đúng thứ tự trong DOM mà không cần ngắt kết nối.
6767

68-
The return value of `createFragment` should be treated as an opaque object; you can use the [`React.Children`](/docs/react-api.html#react.children) helpers to loop through a fragment but should not access it directly. Note also that we're relying on the JavaScript engine preserving object enumeration order here, which is not guaranteed by the spec but is implemented by all major browsers and VMs for objects with non-numeric keys.
68+
Giá trị trả về của `createFragment` nên được coi là một đối tượng mờ đục; bạn có thể dùng [`React.Children`](/docs/react-api.html#react.children) để lặp qua một đoạn nhưng không nên truy cập trực tiếp vào nó. Chú ý rằng chúng ta đang dùng Javascript để bảo toàn thứ tự các đối tượng được liệt kê, thứ tự này không được đảm bảo bởi thông số kỹ thuật nhưng được triển khai bởi tất cả các trình duyệt và máy ảo cho các đối tượng có khóa không phải là số.

0 commit comments

Comments
 (0)