diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md index f34e9e5d6e..082a16d63b 100644 --- a/content/docs/lists-and-keys.md +++ b/content/docs/lists-and-keys.md @@ -1,14 +1,14 @@ --- id: lists-and-keys -title: Lists and Keys +title: 列表 & Keys permalink: docs/lists-and-keys.html prev: conditional-rendering.html next: forms.html --- -First, let's review how you transform lists in JavaScript. +首先,让我们看下在 Javascript 中如何转化列表。 -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: +如下代码,我们使用 [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 函数让数组中的每一项变双倍,然后我们得到了一个新的列表 `doubled`并打印出来: ```javascript{2} const numbers = [1, 2, 3, 4, 5]; @@ -16,15 +16,15 @@ const doubled = numbers.map((number) => number * 2); console.log(doubled); ``` -This code logs `[2, 4, 6, 8, 10]` to the console. +代码打印出 `[2, 4, 6, 8, 10]`。 -In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical. +在 React 中,把数组转化为[元素](/docs/rendering-elements.html) 列表的过程是相似的。 -### Rendering Multiple Components {#rendering-multiple-components} +### 渲染多个组件 {#rendering-multiple-components} -You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`. +你可以通过使用 `{}` 在 JSX 内构建一个[元素集合](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。 -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 `
  • ` element for each item. Finally, we assign the resulting array of elements to `listItems`: +下面,我们使用 Javascript 中的 [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 方法来遍历 `numbers` 数组。将数组中的每个元素变成 `
  • ` 标签,最后我们将得到的数组赋值给 `listItems`: ```javascript{2-4} const numbers = [1, 2, 3, 4, 5]; @@ -33,7 +33,7 @@ const listItems = numbers.map((number) => ); ``` -We include the entire `listItems` array inside a `