diff --git a/beta/src/content/learn/rendering-lists.md b/beta/src/content/learn/rendering-lists.md
index b7c4854b5b..584a18dd1b 100644
--- a/beta/src/content/learn/rendering-lists.md
+++ b/beta/src/content/learn/rendering-lists.md
@@ -1,74 +1,77 @@
 ---
-title: Rendering Lists
+title: 渲染列表
+translator:
+  - Megrax
+  - rottenpen
 ---
 
 <Intro>
 
-You will often want to display multiple similar components from a collection of data. You can use the [JavaScript array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#) to manipulate an array of data. On this page, you'll use [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) with React to filter and transform your array of data into an array of components.
+你可能经常需要通过 [JavaScript 的数组方法](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#) 来操作数组中的数据，从而将一个数据集渲染成多个相似的组件。在这篇文章中，你将学会如何在 React 中使用 [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 筛选需要渲染的组件和使用 [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 把数组转换成组件数组。
 
 </Intro>
 
 <YouWillLearn>
 
-* How to render components from an array using JavaScript's `map()`
-* How to render only specific components using JavaScript's `filter()`
-* When and why to use React keys
+* 如何通过 JavaScript 的 `map()` 方法从数组中生成组件
+* 如何通过 JavaScript 的 `filter()` 筛选需要渲染的组件
+* 何时以及为何使用 React 中的 key
 
 </YouWillLearn>
 
-## Rendering data from arrays {/*rendering-data-from-arrays*/}
+## 从数组中渲染数据 {/*rendering-data-from-arrays*/}
 
-Say that you have a list of content.
+这里我们有一个列表。
 
 ```js
 <ul>
-  <li>Creola Katherine Johnson: mathematician</li>
-  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
-  <li>Mohammad Abdus Salam: physicist</li>
-  <li>Percy Lavon Julian: chemist</li>
-  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
+  <li>凯瑟琳·约翰逊: 数学家</li>
+  <li>马里奥·莫利纳: 化学家</li>
+  <li>穆罕默德·阿卜杜勒·萨拉姆: 物理学家</li>
+  <li>珀西·莱温·朱利亚: 化学家</li>
+  <li>苏布拉马尼扬·钱德拉塞卡: 天体物理学家</li>
 </ul>
 ```
 
-The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to render lists of components from them.
+可以看到，这些列表项之间唯一的区别就是其中的内容/数据。未来你可能会碰到很多类似的情况，在那些场景中，你想基于不同的数据渲染出相似的组件，比如评论列表或者个人资料的图库。在这样的场景下，可以把要用到的数据存入 JavaScript 对象或数组，然后用 [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 或 [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 这样的方法来渲染出一个组件列表。
 
-Here’s a short example of how to generate a list of items from an array:
+这里给出一个由数组生成一系列列表项的简单示例：
 
-1. **Move** the data into an array:
+1. 首先，把数据 **存储** 到数组中：
 
 ```js
 const people = [
-  'Creola Katherine Johnson: mathematician',
-  'Mario José Molina-Pasquel Henríquez: chemist',
-  'Mohammad Abdus Salam: physicist',
-  'Percy Lavon Julian: chemist',
-  'Subrahmanyan Chandrasekhar: astrophysicist'
+  '凯瑟琳·约翰逊: 数学家',
+  '马里奥·莫利纳: 化学家',
+  '穆罕默德·阿卜杜勒·萨拉姆: 物理学家',
+  '珀西·莱温·朱利亚: 化学家',
+  '苏布拉马尼扬·钱德拉塞卡: 天体物理学家',
 ];
 ```
 
-2. **Map** the `people` members into a new array of JSX nodes, `listItems`:
+2. **遍历** `people` 这个数组中的每一项，并获得一个新的 JSX 节点数组 `listItems`：
 
 ```js
 const listItems = people.map(person => <li>{person}</li>);
 ```
 
-3. **Return** `listItems` from your component wrapped in a `<ul>`:
+3. 把 `listItems` 用 `<ul>` 包裹起来，然后 **返回** 它：
 
 ```js
 return <ul>{listItems}</ul>;
 ```
 
-Here is the result:
+来看看运行的结果：
 
 <Sandpack>
 
 ```js
 const people = [
-  'Creola Katherine Johnson: mathematician',
-  'Mario José Molina-Pasquel Henríquez: chemist',
-  'Mohammad Abdus Salam: physicist',
-  'Percy Lavon Julian: chemist',
-  'Subrahmanyan Chandrasekhar: astrophysicist'
+  '凯瑟琳·约翰逊: 数学家',
+  '马里奥·莫利纳: 化学家',
+  '穆罕默德·阿卜杜勒·萨拉姆: 物理学家',
+  '珀西·莱温·朱利亚: 化学家',
+  '苏布拉马尼扬·钱德拉塞卡: 天体物理学家',
 ];
 
 export default function List() {
@@ -85,7 +88,7 @@ li { margin-bottom: 10px; }
 
 </Sandpack>
 
-Notice the sandbox above displays a console error:
+注意上面的沙盒可能会输出这样一个控制台错误：
 
 <ConsoleBlock level="error">
 
@@ -93,47 +96,53 @@ Warning: Each child in a list should have a unique "key" prop.
 
 </ConsoleBlock>
 
-You'll learn how to fix this error later on this page. Before we get to that, let's add some structure to your data.
+等会我们会学到怎么修复它。在此之前，我们先来看看如何把这个数组变得更加结构化。
 
-## Filtering arrays of items {/*filtering-arrays-of-items*/}
+## 对数组项进行过滤 {/*filtering-arrays-of-items*/}
 
-This data can be structured even more.
+让我们把 `people` 数组变得更加结构化一点。
 
 ```js
-const people = [{
-  id: 0,
-  name: 'Creola Katherine Johnson',
-  profession: 'mathematician',
-}, {
-  id: 1,
-  name: 'Mario José Molina-Pasquel Henríquez',
-  profession: 'chemist',
-}, {
-  id: 2,
-  name: 'Mohammad Abdus Salam',
-  profession: 'physicist',
-}, {
-  name: 'Percy Lavon Julian',
-  profession: 'chemist',  
-}, {
-  name: 'Subrahmanyan Chandrasekhar',
-  profession: 'astrophysicist',
-}];
+const people = [
+  {
+    id: 0,
+    name: '凯瑟琳·约翰逊',
+    profession: '数学家',
+  },
+  {
+    id: 1,
+    name: '马里奥·莫利纳',
+    profession: '化学家',
+  },
+  {
+    id: 2,
+    name: '穆罕默德·阿卜杜勒·萨拉姆',
+    profession: '物理学家',
+  },
+  {
+    name: '珀西·莱温·朱利亚',
+    profession: '化学家',
+  },
+  {
+    name: '苏布拉马尼扬·钱德拉塞卡',
+    profession: '天体物理学家',
+  },
+];
 ```
 
-Let's say you want a way to only show people whose profession is `'chemist'`. You can use JavaScript's `filter()` method to return just those people. This method takes an array of items, passes them through a “test” (a function that returns `true` or `false`), and returns a new array of only those items that passed the test (returned `true`).
+现在，假设你只想在屏幕上显示职业是 `化学家` 的人。那么你可以使用 JavaScript 的 `filter()` 方法来返回满足条件的项。这个方法会让数组的子项经过 “过滤器”（一个返回值为 `true` 或 `false` 的函数）的筛选，最终返回一个只包含满足条件的项的新数组。
 
-You only want the items where `profession` is `'chemist'`. The "test" function for this looks like `(person) => person.profession === 'chemist'`. Here's how to put it together:
+既然你只想显示 `profession` 值是 `化学家` 的人，那么这里的 “过滤器” 函数应该长这样：`(person) => person.profession === '化学家'`。下面我们来看看该怎么把它们组合在一起：
 
-1. **Create** a new array of just “chemist” people, `chemists`, by calling `filter()` on the `people` filtering by `person.profession === 'chemist'`:
+1. 首先，**创建** 一个用来存化学家们的新数组 `chemists`，这里用到 `filter()` 方法过滤 `people` 数组来得到所有的化学家，过滤的条件应该是 `person.profession === '化学家'`：
 
 ```js
 const chemists = people.filter(person =>
-  person.profession === 'chemist'
+  person.profession === '化学家'
 );
 ```
 
-2. Now **map** over `chemists`:
+2. 接下来 **用 map 方法遍历** `chemists` 数组:
 
 ```js {1,13}
 const listItems = chemists.map(person =>
@@ -145,13 +154,13 @@ const listItems = chemists.map(person =>
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
-       known for {person.accomplishment}
+       因{person.accomplishment}而闻名世界
      </p>
   </li>
 );
 ```
 
-3. Lastly, **return** the `listItems` from your component:
+3. 最后，**返回** `listItems`：
 
 ```js
 return <ul>{listItems}</ul>;
@@ -165,7 +174,7 @@ import { getImageUrl } from './utils.js';
 
 export default function List() {
   const chemists = people.filter(person =>
-    person.profession === 'chemist'
+    person.profession === '化学家'
   );
   const listItems = chemists.map(person =>
     <li>
@@ -176,7 +185,7 @@ export default function List() {
       <p>
         <b>{person.name}:</b>
         {' ' + person.profession + ' '}
-        known for {person.accomplishment}
+        因{person.accomplishment}而闻名世界
       </p>
     </li>
   );
@@ -185,37 +194,43 @@ export default function List() {
 ```
 
 ```js data.js
-export const people = [{
-  id: 0,
-  name: 'Creola Katherine Johnson',
-  profession: 'mathematician',
-  accomplishment: 'spaceflight calculations',
-  imageId: 'MK3eW3A'
-}, {
-  id: 1,
-  name: 'Mario José Molina-Pasquel Henríquez',
-  profession: 'chemist',
-  accomplishment: 'discovery of Arctic ozone hole',
-  imageId: 'mynHUSa'
-}, {
-  id: 2,
-  name: 'Mohammad Abdus Salam',
-  profession: 'physicist',
-  accomplishment: 'electromagnetism theory',
-  imageId: 'bE7W1ji'
-}, {
-  id: 3,
-  name: 'Percy Lavon Julian',
-  profession: 'chemist',
-  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
-  imageId: 'IOjWm71'
-}, {
-  id: 4,
-  name: 'Subrahmanyan Chandrasekhar',
-  profession: 'astrophysicist',
-  accomplishment: 'white dwarf star mass calculations',
-  imageId: 'lrWQx8l'
-}];
+export const people = [
+  {
+    id: 0,
+    name: '凯瑟琳·约翰逊',
+    profession: '数学家',
+    accomplishment: '太空飞行相关数值的核算',
+    imageId: 'MK3eW3A',
+  },
+  {
+    id: 1,
+    name: '马里奥·莫利纳',
+    profession: '化学家',
+    accomplishment: '北极臭氧空洞的发现',
+    imageId: 'mynHUSa',
+  },
+  {
+    id: 2,
+    name: '穆罕默德·阿卜杜勒·萨拉姆',
+    profession: '物理学家',
+    accomplishment: '关于基本粒子间弱相互作用和电磁相互作用的统一理论',
+    imageId: 'bE7W1ji',
+  },
+  {
+    id: 3,
+    name: '珀西·莱温·朱利亚',
+    profession: '化学家',
+    accomplishment: '开创性的可的松药物、类固醇和避孕药的研究',
+    imageId: 'IOjWm71',
+  },
+  {
+    id: 4,
+    name: '苏布拉马尼扬·钱德拉塞卡',
+    profession: '天体物理学家',
+    accomplishment: '白矮星质量计算',
+    imageId: 'lrWQx8l',
+  },
+];
 ```
 
 ```js utils.js
@@ -244,29 +259,29 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 <Pitfall>
 
-Arrow functions implicitly return the expression right after `=>`, so you didn't need a `return` statement:
+因为箭头函数会隐式地返回位于 `=>` 之后的表达式，所以你可以省略 `return` 语句。
 
 ```js
 const listItems = chemists.map(person =>
-  <li>...</li> // Implicit return!
+  <li>...</li> // 隐式地返回！
 );
 ```
 
-However, **you must write `return` explicitly if your `=>` is followed by a `{` curly brace!**
+不过，**如果你的 `=>` 后面跟了一对花括号 `{` ，那你必须使用 `return` 来指定返回值！**
 
 ```js
-const listItems = chemists.map(person => { // Curly brace
+const listItems = chemists.map(person => { // 花括号
   return <li>...</li>;
 });
 ```
 
-Arrow functions containing `=> {` are said to have a ["block body".](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body) They let you write more than a single line of code, but you *have to* write a `return` statement yourself. If you forget it, nothing gets returned!
+箭头函数 `=> {` 后面的部分被称为 ["块函数体"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body)，块函数体支持多行代码的写法，但要用 `return` 语句才能指定返回值。假如你忘了写 `return`，那这个函数什么都不会返回！
 
 </Pitfall>
 
-## Keeping list items in order with `key` {/*keeping-list-items-in-order-with-key*/}
+## 用 `key` 保持列表项的顺序 {/*keeping-list-items-in-order-with-key*/}
 
-Notice that all the sandboxes above show an error in the console:
+如果把上面任何一个沙盒示例在新标签页打开，你就会发现控制台有这样一个报错：
 
 <ConsoleBlock level="error">
 
@@ -274,7 +289,7 @@ Warning: Each child in a list should have a unique "key" prop.
 
 </ConsoleBlock>
 
-You need to give each array item a `key` -- a string or a number that uniquely identifies it among other items in that array:
+这是因为你必须给数组中的每一项都指定一个 `key`————它可以是字符串或数字的形式，只要能唯一标识出各个数组项就行：
 
 ```js
 <li key={person.id}>...</li>
@@ -282,13 +297,13 @@ You need to give each array item a `key` -- a string or a number that uniquely i
 
 <Note>
 
-JSX elements directly inside a `map()` call always need keys!
+直接放在 `map()` 方法里的 JSX 元素一般都需要指定 `key` 值！
 
 </Note>
 
-Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen `key` helps React infer what exactly has happened, and make the correct updates to the DOM tree.
+这些 key 会告诉 React，每个组件对应着数组里的哪一项，所以 React 可以把它们匹配起来。这在数组项进行移动（例如排序）、插入或删除等操作时非常重要。一个合适的 `key` 可以帮助 React 推断发生了什么，从而得以正确地更新 DOM 树。
 
-Rather than generating keys on the fly, you should include them in your data:
+用作 key 的值应该在数据中提前就准备好，而不是在运行时才随手生成：
 
 <Sandpack>
 
@@ -306,7 +321,7 @@ export default function List() {
       <p>
         <b>{person.name}</b>
           {' ' + person.profession + ' '}
-          known for {person.accomplishment}
+          因{person.accomplishment}而闻名世界
       </p>
     </li>
   );
@@ -315,37 +330,43 @@ export default function List() {
 ```
 
 ```js data.js active
-export const people = [{
-  id: 0, // Used in JSX as a key
-  name: 'Creola Katherine Johnson',
-  profession: 'mathematician',
-  accomplishment: 'spaceflight calculations',
-  imageId: 'MK3eW3A'
-}, {
-  id: 1, // Used in JSX as a key
-  name: 'Mario José Molina-Pasquel Henríquez',
-  profession: 'chemist',
-  accomplishment: 'discovery of Arctic ozone hole',
-  imageId: 'mynHUSa'
-}, {
-  id: 2, // Used in JSX as a key
-  name: 'Mohammad Abdus Salam',
-  profession: 'physicist',
-  accomplishment: 'electromagnetism theory',
-  imageId: 'bE7W1ji'
-}, {
-  id: 3, // Used in JSX as a key
-  name: 'Percy Lavon Julian',
-  profession: 'chemist',
-  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
-  imageId: 'IOjWm71'
-}, {
-  id: 4, // Used in JSX as a key
-  name: 'Subrahmanyan Chandrasekhar',
-  profession: 'astrophysicist',
-  accomplishment: 'white dwarf star mass calculations',
-  imageId: 'lrWQx8l'
-}];
+export const people = [
+  {
+    id: 0, // 在 JSX 中作为 key 使用
+    name: '凯瑟琳·约翰逊',
+    profession: '数学家',
+    accomplishment: '太空飞行相关数值的核算',
+    imageId: 'MK3eW3A',
+  },
+  {
+    id: 1, // 在 JSX 中作为 key 使用
+    name: '马里奥·莫利纳',
+    profession: '化学家',
+    accomplishment: '北极臭氧空洞的发现',
+    imageId: 'mynHUSa',
+  },
+  {
+    id: 2, // 在 JSX 中作为 key 使用
+    name: '穆罕默德·阿卜杜勒·萨拉姆',
+    profession: '物理学家',
+    accomplishment: '关于基本粒子间弱相互作用和电磁相互作用的统一理论',
+    imageId: 'bE7W1ji',
+  },
+  {
+    id: 3, // 在 JSX 中作为 key 使用
+    name: '珀西·莱温·朱利亚',
+    profession: '化学家',
+    accomplishment: '开创性的可的松药物、类固醇和避孕药',
+    imageId: 'IOjWm71',
+  },
+  {
+    id: 4, // 在 JSX 中作为 key 使用
+    name: '苏布拉马尼扬·钱德拉塞卡',
+    profession: '天体物理学家',
+    accomplishment: '白矮星质量计算',
+    imageId: 'lrWQx8l',
+  },
+];
 ```
 
 ```js utils.js
@@ -374,11 +395,11 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 <DeepDive>
 
-#### Displaying several DOM nodes for each list item {/*displaying-several-dom-nodes-for-each-list-item*/}
+#### 为每个列表项显示多个 DOM 节点 {/*displaying-several-dom-nodes-for-each-list-item*/}
 
-What do you do when each item needs to render not one, but several DOM nodes?
+如果你想让每个列表项都输出多个 DOM 节点而非一个的话，该怎么做呢？
 
-The short [`<>...</>` Fragment](/reference/react/Fragment) syntax won't let you pass a key, so you need to either group them into a single `<div>`, or use the slightly longer and [more explicit `<Fragment>` syntax:](/reference/react/Fragment#rendering-a-list-of-fragments)
+Fragment 语法的简写形式 `<> </>` 无法接受 key 值，所以你只能要么把生成的节点用一个 `<div>` 标签包裹起来，要么使用长一点但更明确的 `<Fragment>` 写法：
 
 ```js
 import { Fragment } from 'react';
@@ -393,46 +414,46 @@ const listItems = people.map(person =>
 );
 ```
 
-Fragments disappear from the DOM, so this will produce a flat list of `<h1>`, `<p>`, `<h1>`, `<p>`, and so on.
+这里的 Fragment 标签本身并不会出现在 DOM 上，这串代码最终会转换成 `<h1>`、`<p>`、`<h1>`、`<p>`…… 的列表。
 
 </DeepDive>
 
-### Where to get your `key` {/*where-to-get-your-key*/}
+### 如何设定 `key` 值 {/*where-to-get-your-key*/}
 
-Different sources of data provide different sources of keys:
+不同来源的数据往往对应不同的 key 值获取方式：
 
-* **Data from a database:** If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
-* **Locally generated data:** If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) or a package like [`uuid`](https://www.npmjs.com/package/uuid) when creating items.
+* **来自数据库的数据：** 如果你的数据是从数据库中获取的，那你可以直接使用数据表中的主键，因为它们天然具有唯一性。
+* **本地产生数据：** 如果你数据的产生和保存都在本地（例如笔记软件里的笔记），那么你可以使用一个自增计数器或者一个类似 [`uuid`](https://www.npmjs.com/package/uuid) 的库来生成 key。
 
-### Rules of keys {/*rules-of-keys*/}
+### key 需要满足的条件 {/*rules-of-keys*/}
 
-* **Keys must be unique among siblings.** However, it’s okay to use the same keys for JSX nodes in _different_ arrays.
-* **Keys must not change** or that defeats their purpose! Don't generate them while rendering.
+* **key 值在兄弟节点之间必须是唯一的。** 不过不要求全局唯一，在不同的数组中可以使用相同的 key。
+* **key 值不能改变**，否则就失去了使用 key 的意义！所以千万不要在渲染时动态地生成 key。
 
-### Why does React need keys? {/*why-does-react-need-keys*/}
+### React 中为什么需要 key？ {/*why-does-react-need-keys*/}
 
-Imagine that files on your desktop didn't have names. Instead, you'd refer to them by their order -- the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.
+设想一下，假如你桌面上的文件都没有文件名，取而代之的是，你需要通过文件的位置顺序来区分它们———第一个文件，第二个文件，以此类推。也许你也不是不能接受这种方式，可是一旦你删除了其中的一个文件，这种组织方式就会变得混乱无比。原来的第二个文件可能会变成第一个文件，第三个文件会成为第二个文件……
 
-File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the _position_ changes due to reordering, the `key` lets React identify the item throughout its lifetime.
+React 里需要 key 和文件夹里的文件需要有文件名的道理是类似的。它们（key 和文件名）都让我们可以从众多的兄弟元素中唯一标识出某一项（JSX 节点或文件）。而一个精心选择的 key 值所能提供的信息远远不止于这个元素在数组中的位置。即使元素的位置在渲染的过程中发生了改变，它提供的 `key` 值也能让 React 在整个生命周期中一直认得它。
 
 <Pitfall>
 
-You might be tempted to use an item's index in the array as its key. In fact, that's what React will use if you don't specify a `key` at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
+你可能会想直接把数组项的索引当作 key 值来用，实际上，如果你没有显式地指定 `key` 值，React 确实默认会这么做。但是数组项的顺序在插入、删除或者重新排序等操作中会发生改变，此时把索引顺序用作 key 值会产生一些微妙且令人困惑的 bug。
 
-Similarly, do not generate keys on the fly, e.g. with `key={Math.random()}`. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.
+与之类似，请不要在运行过程中动态地产生 key，像是 `key={Math.random()}` 这种方式。这会导致每次重新渲染后的 key 值都不一样，从而使得所有的组件和 DOM 元素每次都要重新创建。这不仅会造成运行变慢的问题，更有可能导致用户输入的丢失。所以，使用能从给定数据中稳定取得的值才是明智的选择。
 
-Note that your components won't receive `key` as a prop. It's only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: `<Profile key={id} userId={id} />`.
+有一点需要注意，组件不会把 `key` 当作 props 的一部分。Key 的存在只对 React 本身起到提示作用。如果你的组件需要一个 ID，那么请把它作为一个单独的 prop 传给组件： `<Profile key={id} userId={id} />`。
 
 </Pitfall>
 
 <Recap>
 
-On this page you learned:
+在这篇文章中，你学习了：
 
-* How to move data out of components and into data structures like arrays and objects.
-* How to generate sets of similar components with JavaScript's `map()`.
-* How to create arrays of filtered items with JavaScript's `filter()`.
-* Why and how to set `key` on each component in a collection so React can keep track of each of them even if their position or data changes.
+* 如何从组件中抽离出数据，并把它们放入像数组、对象这样的数据结构中。
+* 如何使用 JavaScript 的 `map()` 方法来生成一组相似的组件。
+* 如何使用 JavaScript 的 `filter()` 方法来筛选数组。
+* 为何以及如何给集合中的每个组件设置一个 `key` 值：它使 React 能追踪这些组件，即便后者的位置或数据发生了变化。
 
 </Recap>
 
@@ -440,11 +461,11 @@ On this page you learned:
 
 <Challenges>
 
-#### Splitting a list in two {/*splitting-a-list-in-two*/}
+#### 把列表一分为二 {/*splitting-a-list-in-two*/}
 
-This example shows a list of all people.
+下面的示例中有一个包含所有人员信息的列表。
 
-Change it to show two separate lists one after another: **Chemists** and **Everyone Else.** Like previously, you can determine whether a person is a chemist by checking if `person.profession === 'chemist'`.
+请试着把它分成一前一后的两个列表：分别是 **化学家们** 和 **其余的人**。像之前一样，你可以通过 `person.profession === '化学家'` 这个条件来判断一个人是不是化学家。
 
 <Sandpack>
 
@@ -462,13 +483,13 @@ export default function List() {
       <p>
         <b>{person.name}:</b>
         {' ' + person.profession + ' '}
-        known for {person.accomplishment}
+        因{person.accomplishment}而闻名世界
       </p>
     </li>
   );
   return (
     <article>
-      <h1>Scientists</h1>
+      <h1>科学家</h1>
       <ul>{listItems}</ul>
     </article>
   );
@@ -476,37 +497,43 @@ export default function List() {
 ```
 
 ```js data.js
-export const people = [{
-  id: 0,
-  name: 'Creola Katherine Johnson',
-  profession: 'mathematician',
-  accomplishment: 'spaceflight calculations',
-  imageId: 'MK3eW3A'
-}, {
-  id: 1,
-  name: 'Mario José Molina-Pasquel Henríquez',
-  profession: 'chemist',
-  accomplishment: 'discovery of Arctic ozone hole',
-  imageId: 'mynHUSa'
-}, {
-  id: 2,
-  name: 'Mohammad Abdus Salam',
-  profession: 'physicist',
-  accomplishment: 'electromagnetism theory',
-  imageId: 'bE7W1ji'
-}, {
-  id: 3,
-  name: 'Percy Lavon Julian',
-  profession: 'chemist',
-  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
-  imageId: 'IOjWm71'
-}, {
-  id: 4,
-  name: 'Subrahmanyan Chandrasekhar',
-  profession: 'astrophysicist',
-  accomplishment: 'white dwarf star mass calculations',
-  imageId: 'lrWQx8l'
-}];
+export const people = [
+  {
+    id: 0,
+    name: '凯瑟琳·约翰逊',
+    profession: '数学家',
+    accomplishment: '太空飞行相关数值的核算',
+    imageId: 'MK3eW3A',
+  },
+  {
+    id: 1,
+    name: '马里奥·莫利纳',
+    profession: '化学家',
+    accomplishment: '北极臭氧空洞的发现',
+    imageId: 'mynHUSa',
+  },
+  {
+    id: 2,
+    name: '穆罕默德·阿卜杜勒·萨拉姆',
+    profession: '物理学家',
+    accomplishment: '关于基本粒子间弱相互作用和电磁相互作用的统一理论',
+    imageId: 'bE7W1ji',
+  },
+  {
+    id: 3,
+    name: '珀西·莱温·朱利亚',
+    profession: '化学家',
+    accomplishment: '开创性的可的松药物、类固醇和避孕药',
+    imageId: 'IOjWm71',
+  },
+  {
+    id: 4,
+    name: '苏布拉马尼扬·钱德拉塞卡',
+    profession: '天体物理学家',
+    accomplishment: '白矮星质量计算',
+    imageId: 'lrWQx8l',
+  },
+];
 ```
 
 ```js utils.js
@@ -535,7 +562,7 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 <Solution>
 
-You could use `filter()` twice, creating two separate arrays, and then `map` over both of them:
+使用两次 `filter()` 方法来获得两个单独的数组，然后用 `map` 方法分别遍历它们来得到结果。
 
 <Sandpack>
 
@@ -545,15 +572,15 @@ import { getImageUrl } from './utils.js';
 
 export default function List() {
   const chemists = people.filter(person =>
-    person.profession === 'chemist'
+    person.profession === '化学家'
   );
   const everyoneElse = people.filter(person =>
-    person.profession !== 'chemist'
+    person.profession !== '化学家'
   );
   return (
     <article>
-      <h1>Scientists</h1>
-      <h2>Chemists</h2>
+      <h1>科学家</h1>
+      <h2>化学家</h2>
       <ul>
         {chemists.map(person =>
           <li key={person.id}>
@@ -564,12 +591,12 @@ export default function List() {
             <p>
               <b>{person.name}:</b>
               {' ' + person.profession + ' '}
-              known for {person.accomplishment}
+              因{person.accomplishment}而闻名世界
             </p>
           </li>
         )}
       </ul>
-      <h2>Everyone Else</h2>
+      <h2>其余的人</h2>
       <ul>
         {everyoneElse.map(person =>
           <li key={person.id}>
@@ -580,7 +607,7 @@ export default function List() {
             <p>
               <b>{person.name}:</b>
               {' ' + person.profession + ' '}
-              known for {person.accomplishment}
+              因{person.accomplishment}而闻名世界
             </p>
           </li>
         )}
@@ -591,37 +618,43 @@ export default function List() {
 ```
 
 ```js data.js
-export const people = [{
-  id: 0,
-  name: 'Creola Katherine Johnson',
-  profession: 'mathematician',
-  accomplishment: 'spaceflight calculations',
-  imageId: 'MK3eW3A'
-}, {
-  id: 1,
-  name: 'Mario José Molina-Pasquel Henríquez',
-  profession: 'chemist',
-  accomplishment: 'discovery of Arctic ozone hole',
-  imageId: 'mynHUSa'
-}, {
-  id: 2,
-  name: 'Mohammad Abdus Salam',
-  profession: 'physicist',
-  accomplishment: 'electromagnetism theory',
-  imageId: 'bE7W1ji'
-}, {
-  id: 3,
-  name: 'Percy Lavon Julian',
-  profession: 'chemist',
-  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
-  imageId: 'IOjWm71'
-}, {
-  id: 4,
-  name: 'Subrahmanyan Chandrasekhar',
-  profession: 'astrophysicist',
-  accomplishment: 'white dwarf star mass calculations',
-  imageId: 'lrWQx8l'
-}];
+export const people = [
+  {
+    id: 0,
+    name: '凯瑟琳·约翰逊',
+    profession: '数学家',
+    accomplishment: '太空飞行相关数值的核算',
+    imageId: 'MK3eW3A',
+  },
+  {
+    id: 1,
+    name: '马里奥·莫利纳',
+    profession: '化学家',
+    accomplishment: '北极臭氧空洞的发现',
+    imageId: 'mynHUSa',
+  },
+  {
+    id: 2,
+    name: '穆罕默德·阿卜杜勒·萨拉姆',
+    profession: '物理学家',
+    accomplishment: '关于基本粒子间弱相互作用和电磁相互作用的统一理论',
+    imageId: 'bE7W1ji',
+  },
+  {
+    id: 3,
+    name: '珀西·莱温·朱利亚',
+    profession: '化学家',
+    accomplishment: '开创性的可的松药物、类固醇和避孕药',
+    imageId: 'IOjWm71',
+  },
+  {
+    id: 4,
+    name: '苏布拉马尼扬·钱德拉塞卡',
+    profession: '天体物理学家',
+    accomplishment: '白矮星质量计算',
+    imageId: 'lrWQx8l',
+  },
+];
 ```
 
 ```js utils.js
@@ -648,9 +681,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 </Sandpack>
 
-In this solution, the `map` calls are placed directly inline into the parent `<ul>` elements, but you could introduce variables for them if you find that more readable.
+这个解决方案中，我们直接在父级的 `<ul>` 元素里就执行了 `map` 方法。当然如果你想提高代码的可读性，你也可以先用变量保存一下 `map` 之后的结果。
 
-There is still a bit duplication between the rendered lists. You can go further and extract the repetitive parts into a `<ListSection>` component:
+现在得到的列表中仍然存在一些重复的代码，我们可以更进一步，将这些重复的部分提取成一个 `<ListSection>` 组件：
 
 <Sandpack>
 
@@ -672,7 +705,7 @@ function ListSection({ title, people }) {
             <p>
               <b>{person.name}:</b>
               {' ' + person.profession + ' '}
-              known for {person.accomplishment}
+              因{person.accomplishment}而闻名世界
             </p>
           </li>
         )}
@@ -683,21 +716,21 @@ function ListSection({ title, people }) {
 
 export default function List() {
   const chemists = people.filter(person =>
-    person.profession === 'chemist'
+    person.profession === '化学家'
   );
   const everyoneElse = people.filter(person =>
-    person.profession !== 'chemist'
+    person.profession !== '化学家'
   );
   return (
     <article>
-      <h1>Scientists</h1>
+      <h1>科学家</h1>
       <ListSection
-        title="Chemists"
+        title="化学家"
         people={chemists}
       />
       <ListSection
-        title="Everyone Else"
-        people={everyoneElse}
+      title="其余的人"
+      people={everyoneElse} 
       />
     </article>
   );
@@ -705,37 +738,43 @@ export default function List() {
 ```
 
 ```js data.js
-export const people = [{
-  id: 0,
-  name: 'Creola Katherine Johnson',
-  profession: 'mathematician',
-  accomplishment: 'spaceflight calculations',
-  imageId: 'MK3eW3A'
-}, {
-  id: 1,
-  name: 'Mario José Molina-Pasquel Henríquez',
-  profession: 'chemist',
-  accomplishment: 'discovery of Arctic ozone hole',
-  imageId: 'mynHUSa'
-}, {
-  id: 2,
-  name: 'Mohammad Abdus Salam',
-  profession: 'physicist',
-  accomplishment: 'electromagnetism theory',
-  imageId: 'bE7W1ji'
-}, {
-  id: 3,
-  name: 'Percy Lavon Julian',
-  profession: 'chemist',
-  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
-  imageId: 'IOjWm71'
-}, {
-  id: 4,
-  name: 'Subrahmanyan Chandrasekhar',
-  profession: 'astrophysicist',
-  accomplishment: 'white dwarf star mass calculations',
-  imageId: 'lrWQx8l'
-}];
+export const people = [
+  {
+    id: 0,
+    name: '凯瑟琳·约翰逊',
+    profession: '数学家',
+    accomplishment: '太空飞行相关数值的核算',
+    imageId: 'MK3eW3A',
+  },
+  {
+    id: 1,
+    name: '马里奥·莫利纳',
+    profession: '化学家',
+    accomplishment: '北极臭氧空洞的发现',
+    imageId: 'mynHUSa',
+  },
+  {
+    id: 2,
+    name: '穆罕默德·阿卜杜勒·萨拉姆',
+    profession: '物理学家',
+    accomplishment: '关于基本粒子间弱相互作用和电磁相互作用的统一理论',
+    imageId: 'bE7W1ji',
+  },
+  {
+    id: 3,
+    name: '珀西·莱温·朱利亚',
+    profession: '化学家',
+    accomplishment: '开创性的可的松药物、类固醇和避孕药',
+    imageId: 'IOjWm71',
+  },
+  {
+    id: 4,
+    name: '苏布拉马尼扬·钱德拉塞卡',
+    profession: '天体物理学家',
+    accomplishment: '白矮星质量计算',
+    imageId: 'lrWQx8l',
+  },
+];
 ```
 
 ```js utils.js
@@ -762,9 +801,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 </Sandpack>
 
-A very attentive reader might notice that with two `filter` calls, we check each person's profession twice. Checking a property is very fast, so in this example it's fine. If your logic was more expensive than that, you could replace the `filter` calls with a loop that manually constructs the arrays and checks each person once.
+仔细的读者会发现我们在这写了两个 `filter`，对于每个人的职业我们都进行了两次过滤。读取一个属性的值花不了多少时间，因此放在这个简单的示例中没什么大问题。但是如果你的代码逻辑比这里复杂和“昂贵”得多，那你可以把两次的 `filter` 替换成一个只需进行一次检查就能构造两个数组的循环。
 
-In fact, if `people` never change, you could move this code out of your component. From React's perspective, all that matters is that you give it an array of JSX nodes in the end. It doesn't care how you produce that array:
+实际上，如果 `people` 的数据不会改变，可以直接把这段代码移到组件外面。从 React 的视角来看，它只关心你最后给它的是不是包含 JSX 节点的数组，并不在乎数组是怎么来的：
 
 <Sandpack>
 
@@ -775,7 +814,7 @@ import { getImageUrl } from './utils.js';
 let chemists = [];
 let everyoneElse = [];
 people.forEach(person => {
-  if (person.profession === 'chemist') {
+  if (person.profession === '化学家') {
     chemists.push(person);
   } else {
     everyoneElse.push(person);
@@ -796,7 +835,7 @@ function ListSection({ title, people }) {
             <p>
               <b>{person.name}:</b>
               {' ' + person.profession + ' '}
-              known for {person.accomplishment}
+              因{person.accomplishment}而闻名世界
             </p>
           </li>
         )}
@@ -808,13 +847,13 @@ function ListSection({ title, people }) {
 export default function List() {
   return (
     <article>
-      <h1>Scientists</h1>
+      <h1>科学家</h1>
       <ListSection
-        title="Chemists"
+        title="化学家"
         people={chemists}
       />
       <ListSection
-        title="Everyone Else"
+        title="其余的人"
         people={everyoneElse}
       />
     </article>
@@ -823,37 +862,43 @@ export default function List() {
 ```
 
 ```js data.js
-export const people = [{
-  id: 0,
-  name: 'Creola Katherine Johnson',
-  profession: 'mathematician',
-  accomplishment: 'spaceflight calculations',
-  imageId: 'MK3eW3A'
-}, {
-  id: 1,
-  name: 'Mario José Molina-Pasquel Henríquez',
-  profession: 'chemist',
-  accomplishment: 'discovery of Arctic ozone hole',
-  imageId: 'mynHUSa'
-}, {
-  id: 2,
-  name: 'Mohammad Abdus Salam',
-  profession: 'physicist',
-  accomplishment: 'electromagnetism theory',
-  imageId: 'bE7W1ji'
-}, {
-  id: 3,
-  name: 'Percy Lavon Julian',
-  profession: 'chemist',
-  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
-  imageId: 'IOjWm71'
-}, {
-  id: 4,
-  name: 'Subrahmanyan Chandrasekhar',
-  profession: 'astrophysicist',
-  accomplishment: 'white dwarf star mass calculations',
-  imageId: 'lrWQx8l'
-}];
+export const people = [
+  {
+    id: 0,
+    name: '凯瑟琳·约翰逊',
+    profession: '数学家',
+    accomplishment: '太空飞行相关数值的核算',
+    imageId: 'MK3eW3A',
+  },
+  {
+    id: 1,
+    name: '马里奥·莫利纳',
+    profession: '化学家',
+    accomplishment: '北极臭氧空洞的发现',
+    imageId: 'mynHUSa',
+  },
+  {
+    id: 2,
+    name: '穆罕默德·阿卜杜勒·萨拉姆',
+    profession: '物理学家',
+    accomplishment: '关于基本粒子间弱相互作用和电磁相互作用的统一理论',
+    imageId: 'bE7W1ji',
+  },
+  {
+    id: 3,
+    name: '珀西·莱温·朱利亚',
+    profession: '化学家',
+    accomplishment: '开创性的可的松药物、类固醇和避孕药',
+    imageId: 'IOjWm71',
+  },
+  {
+    id: 4,
+    name: '苏布拉马尼扬·钱德拉塞卡',
+    profession: '天体物理学家',
+    accomplishment: '白矮星质量计算',
+    imageId: 'lrWQx8l',
+  },
+];
 ```
 
 ```js utils.js
@@ -882,13 +927,13 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 </Solution>
 
-#### Nested lists in one component {/*nested-lists-in-one-component*/}
+#### 嵌套列表 {/*nested-lists-in-one-component*/}
 
-Make a list of recipes from this array! For each recipe in the array, display its name as an `<h2>` and list its ingredients in a `<ul>`.
+请根据给你的数组生成菜谱列表！其中每个菜谱，都用 `<h2>` 来显示它的名称，并在 `<ul>` 里列出它所需的原料。
 
 <Hint>
 
-This will require nesting two different `map` calls.
+这里的写法需要嵌套两层 `map`。
 
 </Hint>
 
@@ -900,33 +945,37 @@ import { recipes } from './data.js';
 export default function RecipeList() {
   return (
     <div>
-      <h1>Recipes</h1>
+      <h1>菜谱</h1>
     </div>
   );
 }
 ```
 
 ```js data.js
-export const recipes = [{
-  id: 'greek-salad',
-  name: 'Greek Salad',
-  ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta']
-}, {
-  id: 'hawaiian-pizza',
-  name: 'Hawaiian Pizza',
-  ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple']
-}, {
-  id: 'hummus',
-  name: 'Hummus',
-  ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini']
-}];
+export const recipes = [
+  {
+    id: 'greek-salad',
+    name: '希腊沙拉',
+    ingredients: ['西红柿', '黄瓜', '洋葱', '油橄榄', '羊奶酪'],
+  },
+  {
+    id: 'hawaiian-pizza',
+    name: '夏威夷披萨',
+    ingredients: ['披萨饼皮', '披萨酱', '马苏里拉奶酪', '火腿', '菠萝'],
+  },
+  {
+    id: 'hummus',
+    name: '鹰嘴豆泥',
+    ingredients: ['鹰嘴豆', '橄榄油', '蒜瓣', '柠檬', '芝麻酱'],
+  },
+];
 ```
 
 </Sandpack>
 
 <Solution>
 
-Here is one way you could go about it:
+这是一种可能的解法：
 
 <Sandpack>
 
@@ -936,7 +985,7 @@ import { recipes } from './data.js';
 export default function RecipeList() {
   return (
     <div>
-      <h1>Recipes</h1>
+      <h1>菜谱</h1>
       {recipes.map(recipe =>
         <div key={recipe.id}>
           <h2>{recipe.name}</h2>
@@ -955,30 +1004,34 @@ export default function RecipeList() {
 ```
 
 ```js data.js
-export const recipes = [{
-  id: 'greek-salad',
-  name: 'Greek Salad',
-  ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta']
-}, {
-  id: 'hawaiian-pizza',
-  name: 'Hawaiian Pizza',
-  ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple']
-}, {
-  id: 'hummus',
-  name: 'Hummus',
-  ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini']
-}];
+export const recipes = [
+  {
+    id: 'greek-salad',
+    name: '希腊沙拉',
+    ingredients: ['西红柿', '黄瓜', '洋葱', '油橄榄', '羊奶酪'],
+  },
+  {
+    id: 'hawaiian-pizza',
+    name: '夏威夷披萨',
+    ingredients: ['披萨饼皮', '披萨酱', '马苏里拉奶酪', '火腿', '菠萝'],
+  },
+  {
+    id: 'hummus',
+    name: '鹰嘴豆泥',
+    ingredients: ['鹰嘴豆', '橄榄油', '蒜瓣', '柠檬', '芝麻酱'],
+  },
+];
 ```
 
 </Sandpack>
 
-Each of the `recipes` already includes an `id` field, so that's what the outer loop uses for its `key`. There is no ID you could use to loop over ingredients. However, it's reasonable to assume that the same ingredient won't be listed twice within the same recipe, so its name can serve as a `key`. Alternatively, you could change the data structure to add IDs, or use index as a `key` (with the caveat that you can't safely reorder ingredients).
+`recipes` 数组中每一项都拥有一个 `id`，所以外层的循环可以直接拿它作为 `key`。不过，在循环遍历原料的时候就没有现成的 `id` 可以用了。但是，合理推测一下，一份菜谱里不会罗列多次同一种原料，所以其实原料的名字就适合作为 `key`。此外，你也可以自行修改原本的数据人为增加一项 `id`，或是使用索引作为 `key`（需要注意的是，这么做会使你无法正常地对原料进行排序）。
 
 </Solution>
 
-#### Extracting a list item component {/*extracting-a-list-item-component*/}
+#### 把列表项提取成一个组件 {/*extracting-a-list-item-component*/}
 
-This `RecipeList` component contains two nested `map` calls. To simplify it, extract a `Recipe` component from it which will accept `id`, `name`, and `ingredients` props. Where do you place the outer `key` and why?
+`RecipeList` 组件的代码里嵌套了两层 `map`。出于简化代码的考虑，我们提取出一个接受 `id`、`name` 和 `ingredients` 作为 props 的 `Recipe` 组件。这种情况下，你会把外层的 `key` 放在哪里呢？原因是什么？
 
 <Sandpack>
 
@@ -988,7 +1041,7 @@ import { recipes } from './data.js';
 export default function RecipeList() {
   return (
     <div>
-      <h1>Recipes</h1>
+      <h1>菜谱</h1>
       {recipes.map(recipe =>
         <div key={recipe.id}>
           <h2>{recipe.name}</h2>
@@ -1007,26 +1060,30 @@ export default function RecipeList() {
 ```
 
 ```js data.js
-export const recipes = [{
-  id: 'greek-salad',
-  name: 'Greek Salad',
-  ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta']
-}, {
-  id: 'hawaiian-pizza',
-  name: 'Hawaiian Pizza',
-  ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple']
-}, {
-  id: 'hummus',
-  name: 'Hummus',
-  ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini']
-}];
+export const recipes = [
+  {
+    id: 'greek-salad',
+    name: '希腊沙拉',
+    ingredients: ['西红柿', '黄瓜', '洋葱', '油橄榄', '羊奶酪'],
+  },
+  {
+    id: 'hawaiian-pizza',
+    name: '夏威夷披萨',
+    ingredients: ['披萨饼皮', '披萨酱', '马苏里拉奶酪', '火腿', '菠萝'],
+  },
+  {
+    id: 'hummus',
+    name: '鹰嘴豆泥',
+    ingredients: ['鹰嘴豆', '橄榄油', '蒜瓣', '柠檬', '芝麻酱'],
+  },
+];
 ```
 
 </Sandpack>
 
 <Solution>
 
-You can copy-paste the JSX from the outer `map` into a new `Recipe` component and return that JSX. Then you can change `recipe.name` to `name`, `recipe.id` to `id`, and so on, and pass them as props to the `Recipe`:
+你可以将外层 `map` 里的 JSX 复制粘贴到新的 `Recipe` 组件中，并作为这个新组件的返回值。接着把原先的 `recipe.name` 改成 `name`，`recipe.id` 改成 `id`，以此类推，最后把它们作为 props 传给 `Recipe`：
 
 <Sandpack>
 
@@ -1051,7 +1108,7 @@ function Recipe({ id, name, ingredients }) {
 export default function RecipeList() {
   return (
     <div>
-      <h1>Recipes</h1>
+      <h1>菜谱</h1>
       {recipes.map(recipe =>
         <Recipe {...recipe} key={recipe.id} />
       )}
@@ -1061,32 +1118,36 @@ export default function RecipeList() {
 ```
 
 ```js data.js
-export const recipes = [{
-  id: 'greek-salad',
-  name: 'Greek Salad',
-  ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta']
-}, {
-  id: 'hawaiian-pizza',
-  name: 'Hawaiian Pizza',
-  ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple']
-}, {
-  id: 'hummus',
-  name: 'Hummus',
-  ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini']
-}];
+export const recipes = [
+  {
+    id: 'greek-salad',
+    name: '希腊沙拉',
+    ingredients: ['西红柿', '黄瓜', '洋葱', '油橄榄', '羊奶酪'],
+  },
+  {
+    id: 'hawaiian-pizza',
+    name: '夏威夷披萨',
+    ingredients: ['披萨饼皮', '披萨酱', '马苏里拉奶酪', '火腿', '菠萝'],
+  },
+  {
+    id: 'hummus',
+    name: '鹰嘴豆泥',
+    ingredients: ['鹰嘴豆', '橄榄油', '蒜瓣', '柠檬', '芝麻酱'],
+  },
+];
 ```
 
 </Sandpack>
 
-Here, `<Recipe {...recipe} key={recipe.id} />` is a syntax shortcut saying "pass all properties of the `recipe` object as props to the `Recipe` component". You could also write each prop explicitly: `<Recipe id={recipe.id} name={recipe.name} ingredients={recipe.ingredients} key={recipe.id} />`.
+这里的 `<Recipe {...recipe} key={recipe.id} />` 是一种简写方式，它表示“把 `recipe` 对象里的每个属性都作为 props 传给 `Recipe` 组件”。这和直接写明每一个 prop 是等价的：`<Recipe id={recipe.id} name={recipe.name} ingredients={recipe.ingredients} key={recipe.id} />`。
 
-**Note that the `key` is specified on the `<Recipe>` itself rather than on the root `<div>` returned from `Recipe`.** This is because this `key` is needed directly within the context of the surrounding array. Previously, you had an array of `<div>`s so each of them needed a `key`, but now you have an array of `<Recipe>`s. In other words, when you extract a component, don't forget to leave the `key` outside the JSX you copy and paste.
+**注意这里的 `key` 是写在 `<Recipe>` 组件本身上的，不要写在 `Recipe` 内部返回的 `<div>` 上。** 这是因为 `key` 只有在就近的数组上下文中才有意义。之前的写法里，我们生成了一个 `<div>` 的数组所以其中的每一项需要一个 `key`，但是现在的写法里，生成的实际上是 `<Recipe>` 的数组。换句话说，在提取组件的时候，`key` 应该写在复制粘贴的 JSX 的外层组件上。
 
 </Solution>
 
-#### List with a separator {/*list-with-a-separator*/}
+#### 带有分隔符的列表 {/*list-with-a-separator*/}
 
-This example renders a famous haiku by Katsushika Hokusai, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
+下面这个示例展示了葛饰北斋一首著名的俳句，它的每一行都由 `<p>` 标签包裹。你需要在段落之间插入分隔符 `<hr />`，最终的结果大概像这样：
 
 ```js
 <article>
@@ -1098,7 +1159,7 @@ This example renders a famous haiku by Katsushika Hokusai, with each line wrappe
 </article>
 ```
 
-A haiku only contains three lines, but your solution should work with any number of lines. Note that `<hr />` elements only appear *between* the `<p>` elements, not in the beginning or the end!
+一首俳句通常只有三行，但是你的解答应当适用于任何行数。注意，`<hr />` 元素只应该在 `<p>` 元素 **之间** 出现，而不是在开头或结尾。
 
 <Sandpack>
 
@@ -1141,17 +1202,17 @@ hr {
 
 </Sandpack>
 
-(This is a rare case where index as a key is acceptable because a poem's lines will never reorder.)
+（这是一个比较少见的可以把数组索引用作 key 的例子，因为诗句之间的顺序必然是固定的。）
 
 <Hint>
 
-You'll either need to convert `map` to a manual loop, or use a fragment.
+你可以尝试把原本的 `map` 改造成手动循环，或者试下 fragment 语法。
 
 </Hint>
 
 <Solution>
 
-You can write a manual loop, inserting `<hr />` and `<p>...</p>` into the output array as you go:
+可以写一个循环，在循环的过程中把 `<hr />` 和 `<p>...</p>` 插入到输出的数组：
 
 <Sandpack>
 
@@ -1167,7 +1228,7 @@ const poem = {
 export default function Poem() {
   let output = [];
 
-  // Fill the output array
+  // 填充输出的数组
   poem.lines.forEach((line, i) => {
     output.push(
       <hr key={i + '-separator'} />
@@ -1178,7 +1239,7 @@ export default function Poem() {
       </p>
     );
   });
-  // Remove the first <hr />
+  // 移除第一个 <hr />
   output.shift();
 
   return (
@@ -1206,9 +1267,9 @@ hr {
 
 </Sandpack>
 
-Using the original line index as a `key` doesn't work anymore because each separator and paragraph are now in the same array. However, you can give each of them a distinct key using a suffix, e.g. `key={i + '-text'}`.
+原本使用诗句顺序索引作为 `key` 的方法已经行不通了，因为现在数组里同时包含了分隔符和诗句。但是，你可以用添加后缀的形式给它们赋予独一无二的 key 值，比如 `key={i + '-text'}` 这样。
 
-Alternatively, you could render a collection of fragments which contain `<hr />` and `<p>...</p>`. However, the `<>...</>` shorthand syntax doesn't support passing keys, so you'd have to write `<Fragment>` explicitly:
+另一种做法是，生成包含 `<hr />` 和 `<p>...</p>` 的 fragment 集合，但因其简写语法 `<> </>` 不支持指定 key，所以你需要写成 `<Fragment>` 的形式。
 
 <Sandpack>
 
@@ -1254,7 +1315,7 @@ hr {
 
 </Sandpack>
 
-Remember, fragments (often written as `<> </>`) let you group JSX nodes without adding extra `<div>`s!
+记住，采用 fragment 语法（通常写作 `<> </>`）来包裹 JSX 节点可以避免引入额外的 `<div>` 元素！
 
 </Solution>