Skip to content

Commit 6a7d96a

Browse files
authored
Merge pull request #19 from NhanHoang8195/translate/lists-and-keys
Translate lists and keys
2 parents 3d66a8f + 5710384 commit 6a7d96a

File tree

1 file changed

+47
-45
lines changed

1 file changed

+47
-45
lines changed

content/docs/lists-and-keys.md

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
---
22
id: lists-and-keys
3-
title: Lists and Keys
3+
title: Lists Keys
44
permalink: docs/lists-and-keys.html
55
prev: conditional-rendering.html
66
next: forms.html
77
---
88

9-
First, let's review how you transform lists in JavaScript.
9+
Đầu tiên, hãy xem lại cách bạn chuyển đổi "danh sách" (lists) trong Javascript.
1010

11-
Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
11+
Trong đoạn code bên dưới, chúng ta sử dụng hàm [`map()`](https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/map) để nhân đôi giá trị của từng phần tử trong mảng `numbers`. Chúng ta gán mảng mới là kết quả trả về từ hàm `map()` vào biến `doubled` và xuất kết quả đó ra:
1212

1313
```javascript{2}
1414
const numbers = [1, 2, 3, 4, 5];
1515
const doubled = numbers.map((number) => number * 2);
1616
console.log(doubled);
1717
```
1818

19-
This code logs `[2, 4, 6, 8, 10]` to the console.
19+
Đoạn code trên xuất kết quả `[2, 4, 6, 8, 10]` ra màn hình console.
2020

21-
In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
21+
Trong React, việc chuyển đổi mảng các phần tử thành danh sách (arrays into lists) của các [element](/docs/rendering-elements.html) là gần như giống hệt nhau.
2222

23-
### Rendering Multiple Components {#rendering-multiple-components}
23+
### Render Nhiều Component {#rendering-multiple-components}
2424

25-
You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
25+
Bạn có thể xây dựng nhiều tập hợp (collections) của các element và [nhúng những tập hợp element này vào JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) bằng việc sử dụng dấu ngoặc nhọn `{}`.
2626

27-
Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:
27+
Dưới đây, chúng ta sử dụng vòng lặp trên mảng `numbers` và sử dụng hàm [`map()`](https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/map) trong JavaScript. Kết quả trả về là một thẻ `<li>` cho mỗi vòng lặp. Cuối cùng, chúng ta gán mảng kết quả gồm những element (thẻ `<li>`) cho `listItems`:
2828

2929
```javascript{2-4}
3030
const numbers = [1, 2, 3, 4, 5];
@@ -33,7 +33,7 @@ const listItems = numbers.map((number) =>
3333
);
3434
```
3535

36-
We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
36+
Chúng ta nhúng toàn bộ `listItems` vào trong thẻ `<ul>` , và [render mảng này ra DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
3737

3838
```javascript{2}
3939
ReactDOM.render(
@@ -42,15 +42,15 @@ ReactDOM.render(
4242
);
4343
```
4444

45-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
45+
[**Thử trên CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
4646

47-
This code displays a bullet list of numbers between 1 and 5.
47+
Đoạn code trên hiển thị một danh sách từ 1 đến 5 và có chứa các dấu chấm tròn trước mỗi số.
4848

49-
### Basic List Component {#basic-list-component}
49+
### Component Có Danh Sách Cơ Bản (Basic List Component) {#basic-list-component}
5050

51-
Usually you would render lists inside a [component](/docs/components-and-props.html).
51+
Thông thường bạn sẽ render các danh sách trong một [component](/docs/components-and-props.html).
5252

53-
We can refactor the previous example into a component that accepts an array of `numbers` and outputs a list of elements.
53+
Chúng ta có thể điều chỉnh để đưa đoạn code trong ví dụ trước vào một component và trong component đó sẽ nhận một mảng `numbers` và xuất ra danh sách các element.
5454

5555
```javascript{3-5,7,13}
5656
function NumberList(props) {
@@ -59,7 +59,9 @@ function NumberList(props) {
5959
<li>{number}</li>
6060
);
6161
return (
62-
<ul>{listItems}</ul>
62+
<ul>{listItems}</u
63+
64+
l>
6365
);
6466
}
6567
@@ -70,9 +72,9 @@ ReactDOM.render(
7072
);
7173
```
7274

73-
When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
75+
Khi bạn chạy đoạn code này, bạn sẽ nhận một thông báo lưu ý rằng một thuộc tính key nên được truyền vào cho mỗi phần tử (thẻ `<li>` bên trong hàm `map()`). Một "key" là một thuộc tính chuỗi đặc biệt bạn cần phải đưa vào khi tạo danh sách các element. Chúng ta sẽ thảo luận tại sao điều này lại quan trọng trong mục kế tiếp.
7476

75-
Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
77+
Hãy gán `key` vào từng phần tử của chúng ta bên trong `numbers.map()` và sửa cảnh báo bị thiếu key lúc nãy.
7678

7779
```javascript{4}
7880
function NumberList(props) {
@@ -94,11 +96,11 @@ ReactDOM.render(
9496
);
9597
```
9698

97-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
99+
[**Thử trên CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
98100

99101
## Keys {#keys}
100102

101-
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
103+
Các key giúp React xác định những phần tử nào đã thay đổi, được thêm, hay bị xóa. Các key nên được truyền vào các element bên trong một mảng để cho các element này có một định danh cố định (stable identity):
102104

103105
```js{3}
104106
const numbers = [1, 2, 3, 4, 5];
@@ -109,7 +111,7 @@ const listItems = numbers.map((number) =>
109111
);
110112
```
111113

112-
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
114+
Các tốt nhất để chọn một key là sử dụng một chuỗi mà được xác định là duy nhất trong các nút anh em (siblings). Cách thông thường nhất mà bạn sẽ sử dụng là dùng các ID từ dữ liệu của bạn làm key:
113115

114116
```js{2}
115117
const todoItems = todos.map((todo) =>
@@ -119,34 +121,34 @@ const todoItems = todos.map((todo) =>
119121
);
120122
```
121123

122-
When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
124+
Khi bạn không có các ID cố định (stable IDs) cho việc render các phần tử, bạn có thể sử dụng thứ tự của phần tử đó trong danh sách như là một key cũng như là một phương án cuối cùng:
123125

124126
```js{2,3}
125127
const todoItems = todos.map((todo, index) =>
126-
// Only do this if items have no stable IDs
128+
// Chỉ làm điều này khi không có ID cố định
127129
<li key={index}>
128130
{todo.text}
129131
</li>
130132
);
131133
```
132134

133-
We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
135+
Chúng tôi không khuyến khích sử dụng thứ tự của các phần tử cho các key nếu thứ tự của các phần tử có thể thay đổi. Điều này có thể ảnh hưởng đến hiệu suất và có thể gây ra một vài vấn đề với state của component. Xem qua bài viết của Robin Pokorny về việc [giải thích ảnh hưởng tiêu cực của việc sử dụng thứ tự phần tử cho key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). Nếu bạn lựa chọn việc không gán cho key một định danh rõ ràng thì mặc định React sẽ sử dựng thứ tự của phần tử cho key.
134136

135-
Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
137+
Xem thêm [giải thích về việc tại sao các key là cần thiết](/docs/reconciliation.html#recursing-on-children) nếu bạn quan tâm nhiều về vấn đề này.
136138

137-
### Extracting Components with Keys {#extracting-components-with-keys}
139+
### Chia Nhỏ Các Component Với Key {#extracting-components-with-keys}
138140

139-
Keys only make sense in the context of the surrounding array.
141+
Các key chỉ hợp lí trong trường hợp liên quan đến mảng dữ liệu.
140142

141-
For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the `<li>` element in the `ListItem` itself.
143+
Ví dụ, nếu bạn [chia nhỏ](/docs/components-and-props.html#extracting-components) component `ListItem`, bạn nên giữ việc truyền key vào các `<ListItem />` element trong mảng thay vì truyền vào thẻ `<li>` bên trong `ListItem` element.
142144

143-
**Example: Incorrect Key Usage**
145+
**Ví dụ: Trường hợp sử dụng key chưa chính xác**
144146

145147
```javascript{4,5,14,15}
146148
function ListItem(props) {
147149
const value = props.value;
148150
return (
149-
// Wrong! There is no need to specify the key here:
151+
// Sai! Ở đây không cần truyền vào key:
150152
<li key={value.toString()}>
151153
{value}
152154
</li>
@@ -156,7 +158,7 @@ function ListItem(props) {
156158
function NumberList(props) {
157159
const numbers = props.numbers;
158160
const listItems = numbers.map((number) =>
159-
// Wrong! The key should have been specified here:
161+
// Sai! Key nên được truyền vào ở đây:
160162
<ListItem value={number} />
161163
);
162164
return (
@@ -173,18 +175,18 @@ ReactDOM.render(
173175
);
174176
```
175177

176-
**Example: Correct Key Usage**
178+
**Ví dụ: Trường hợp sử dụng key chính xác**
177179

178180
```javascript{2,3,9,10}
179181
function ListItem(props) {
180-
// Correct! There is no need to specify the key here:
182+
// Đúng! Ở đây không cần cụ thể key:
181183
return <li>{props.value}</li>;
182184
}
183185
184186
function NumberList(props) {
185187
const numbers = props.numbers;
186188
const listItems = numbers.map((number) =>
187-
// Correct! Key should be specified inside the array.
189+
// Đúng! Key nên được cụ thể bên trong mảng.
188190
<ListItem key={number.toString()}
189191
value={number} />
190192
);
@@ -202,13 +204,13 @@ ReactDOM.render(
202204
);
203205
```
204206

205-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
207+
[**Thử trên CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
206208

207-
A good rule of thumb is that elements inside the `map()` call need keys.
209+
Một nguyên tắc nhỏ đó là các element bên trong hàm gọi `map()` cần các key.
208210

209-
### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
211+
### Các Key Chỉ Bắt Buộc Là Duy Nhất Giữa Các Nút Anh Em (Siblings) {#keys-must-only-be-unique-among-siblings}
210212

211-
Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
213+
Các Key được sử dụng bên trong các mảng nên là duy nhất giữa các nút anh em của chúng. Tuy nhiên chúng không cần là duy nhất đối với toàn bộ component. Chúng ta có thể sử dụng các key giống nhau khi chúng ta tạo hai mảng khác nhau:
212214

213215
```js{2,5,11,12,19,21}
214216
function Blog(props) {
@@ -246,9 +248,9 @@ ReactDOM.render(
246248
);
247249
```
248250

249-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
251+
[**Thử trên CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
250252

251-
Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
253+
Các key được sử dụng để gợi ý cho React nhưng chúng không được truyền vào cho các component (Nghĩa là các component con sẽ không đọc được prop.key). Nếu bạn cần đọc giá trị giống với giá trị của key bên trong component của bạn, truyền giá trị đó như một prop với một cái tên khác:
252254

253255
```js{3,4}
254256
const content = posts.map((post) =>
@@ -259,11 +261,11 @@ const content = posts.map((post) =>
259261
);
260262
```
261263

262-
With the example above, the `Post` component can read `props.id`, but not `props.key`.
264+
Với ví dụ bên trên, component `Post` có thể đọc giá trị của `props.id`, mà không phải là `props.key`.
263265

264-
### Embedding map() in JSX {#embedding-map-in-jsx}
266+
### Nhúng map() vào JSX {#embedding-map-in-jsx}
265267

266-
In the examples above we declared a separate `listItems` variable and included it in JSX:
268+
Trong các ví dụ trên chúng ta đã khái báo `listItems` thành một biến riêng biệt và đưa nó vào JSX:
267269

268270
```js{3-6}
269271
function NumberList(props) {
@@ -280,7 +282,7 @@ function NumberList(props) {
280282
}
281283
```
282284

283-
JSX allows [embedding any expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result:
285+
JSX cho phép [nhúng expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) bất kì vào trong dấu ngoặc nhọn vì vậy chúng ta có thể xuất kết quả của hàm `map()` như sau:
284286

285287
```js{5-8}
286288
function NumberList(props) {
@@ -296,6 +298,6 @@ function NumberList(props) {
296298
}
297299
```
298300

299-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
301+
[**Thử trên CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
300302

301-
Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
303+
Thỉnh thoảng cách làm như trên làm code gọn gàng hơn, nhưng kiểu này cũng có thể bị lạm dụng. Như trong JavaScript, đôi khi bạn phải quyết định xem có cần phải tạo thêm một biến để cho dễ đọc hay không. Hãy nhớ rằng nếu bên trong hàm `map()` bị lồng (nested) quá nhiều, đó có thể là lúc thích hợp để [chia nhỏ một component](/docs/components-and-props.html#extracting-components).

0 commit comments

Comments
 (0)