From eeac89c42c1b59b4967b279bcf802696d6563633 Mon Sep 17 00:00:00 2001
From: Jiarong <alienover.l.d@gmail.com>
Date: Wed, 3 Nov 2021 23:02:33 +0800
Subject: [PATCH 1/6] docs(cn): conditional-rendering

---
 beta/src/pages/learn/conditional-rendering.md | 232 +++++++++---------
 1 file changed, 117 insertions(+), 115 deletions(-)

diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md
index 1641865cdc..02ab0b3860 100644
--- a/beta/src/pages/learn/conditional-rendering.md
+++ b/beta/src/pages/learn/conditional-rendering.md
@@ -1,24 +1,26 @@
 ---
-title: Conditional Rendering
+title: 条件渲染
+translators:
+  - Alienover
 ---
 
 <Intro>
 
-Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
+通常你的组件会需要根据不同的情况显示不同的内容。在 React，你可以通过使用 Javascript 的 `if` 语句，或者 `&&`，`? :` 运算符来选择性地渲染 JSX。
 
 </Intro>
 
 <YouWillLearn>
 
-* How to return different JSX depending on a condition
-* How to conditionally include or exclude a piece of JSX
-* Common conditional syntax shortcuts you’ll encounter in React codebases
+* 如何根据不同条件返回不同地 JSX
+* 如何根据不同条件包含或者去掉部分 JSX
+* 一些你会在 React 代码库里遇到的常用的条件语法快捷表达式
 
 </YouWillLearn>
 
-## Conditionally returning JSX
+## 选择性地返回 JSX {#conditionally-returning-jsx}
 
-Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not:
+假设有一个 `PackingList` 组件，里面渲染多个 `Item` 组件，每个物品均可被标记为已被打包与否：
 
 <Sandpack>
 
@@ -30,19 +32,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Sally Ride 的行李清单</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="宇航服" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="带金箔的头盔" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Tam 的照片" 
         />
       </ul>
     </section>
@@ -52,9 +54,9 @@ export default function PackingList() {
 
 </Sandpack>
 
-Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`.
+可以注意到的是，有些 `Item` 组件的 `isPacked` 属性是被设为 `true` 而不是 `false`。你想在那些满足 `isPacked={true}` 条件的物品旁加上一个勾选符号（✔）。
 
-You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so:
+你可以用 [if/else 语句](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 去实现：
 
 ```js
 if (isPacked) {
@@ -63,7 +65,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-If the `isPacked` prop is `true`, this code **returns a different JSX tree**. With this change, some of the items get a checkmark at the end:
+如果 `isPacked` 属性是 `true`，这段代码会**返回一个不一样的JSX**。通过这样的改动，一些物品的名字后面会出现一个勾选符号：
 
 <Sandpack>
 
@@ -78,19 +80,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Sally Ride 的行李清单</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="宇航服" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="带金箔的头盔" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Tam 的照片" 
         />
       </ul>
     </section>
@@ -100,13 +102,13 @@ export default function PackingList() {
 
 </Sandpack>
 
-Try editing what gets returned in either case, and see how the result changes!
+动手尝试一下，看看各种情况会出现什么不同的结果！
 
-Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript.
+留意这里你是怎么使用 JavaScript 的 `if` 和 `return` 语句来写分支逻辑。在 React，是由 JavaScript 来处理控制流的（比如条件)。
 
-### Conditionally returning nothing with `null`
+### 选择性地返回 `null` {#conditionally-returning-nothing-with-null}
 
-In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`:
+在一些情况下，你不想有任何东西进行渲染。比如，假设你不想显示已经打包好的物品。但一个组件必须返回一些东西。这种情况下，你可以直接返回 `null`。
 
 ```js
 if (isPacked) {
@@ -115,7 +117,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render.
+如果组件的 `isPacked` 属性为 `true`，那么它将只返回 `null`。否则，它将返回相应的 JSX 用来渲染。
 
 <Sandpack>
 
@@ -130,19 +132,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Sally Ride 的行李清单</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="宇航服" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="带金箔的头盔" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Tam 的照片" 
         />
       </ul>
     </section>
@@ -152,23 +154,23 @@ export default function PackingList() {
 
 </Sandpack>
 
-In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that!
+实际上，在组件里返回 `null` 并不常见，因为这样会让想使用它的开发者感觉奇怪。通常，你可以在父组件里选择是否要渲染该组件。让我们接着往下看吧！
 
-## Conditionally including JSX
+## 选择性地包含 JSX {#conditionally-including-jsx}
 
-In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:
+在之前的例子里，你通过在组件内部控制哪些 JSX 树（如果有的话！）会返回。你可能已经发现了在渲染输出里会有一些重复的内容：
 
 ```js
 <li className="item">{name} ✔</li>
 ```
 
-is very similar to
+相似于
 
 ```js
 <li className="item">{name}</li>
 ```
 
-Both of the conditional branches return `<li className="item">...</li>`:
+两个条件分支都会返回 `<li className="item">...</li>`：
 
 ```js
 if (isPacked) {
@@ -177,13 +179,13 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself).
+虽然这些重复的内容没什么害处，但这样可能会导致你的代码更难维护。比如你想更改 `className`？你就需要修改两个地方！针对这种情况，你可以通过选择性地包含一小段 JSX 来让你的代码更加 [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)。
 
-### Conditional (ternary) operator (`? :`)
+### 三目运算符（`? :`）{#conditionally-operator}
 
-JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator."
+JavaScript 有一种紧凑型语法来实现条件判断表达式 -- [条件运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 又称“三目运算符”。
 
-Instead of this:
+除了这样：
 
 ```js
 if (isPacked) {
@@ -192,7 +194,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-You can write this:
+你还可以这样实现：
 
 ```js
 return (
@@ -202,15 +204,15 @@ return (
 );
 ```
 
-You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`."*)
+你可以认为，*“如果 `isPacked=true` 时，则（`?`）渲染 `name + ' ✔'`，否则（`:`）渲染 `name`。”*
 
-<DeepDive title="Are these two examples fully equivalent?">
+<DeepDive title="这两个例子完全相同吗？">
 
-If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `<li>`. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works.
+如果你之前是习惯面向对象开发的，你可能会认为上面的两个例子略有不同，因为其中一个可能会创建两个不同的 `<li>` “实例”。但 JSX 元素不是“实例”，因为它们没有内部状态也不是真是的 DOM 节点。它们只是一些简单的描述，就像图纸一样。所以上面这两个例子，事实上，是完全相同的。在 [状态的保持和重置](/learn/preserving-and-resetting-state) 里会深入探讨其原因。
 
 </DeepDive>
 
-Now let's say you want to wrap the completed item's text into another HTML tag, like `<del>` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX each of the cases:
+现在，假如你想将对应物品的文本放到另一个 HTML 标签里，比如用 `<del>` 来显示删除线。你可以添加更多的换行和括号，以便在各种情况下更好地去嵌套 JSX：
 
 <Sandpack>
 
@@ -232,19 +234,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Sally Ride 的行李清单</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="宇航服" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="带金箔的头盔" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Tam 的照片" 
         />
       </ul>
     </section>
@@ -254,11 +256,11 @@ export default function PackingList() {
 
 </Sandpack>
 
-This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions.
+对于简单的条件判断，这样的风格可以很好地实现，但需要适量使用。如果你的组件里有很多的嵌套式条件表达式，则需要考虑通过提取为子组件来简化这些嵌套表达式。在 React 里，标记也是你代码中的一部分，所以你可以使用变量和函数来整理一些复杂的表达式。
 
-### Logical AND operator (`&&`)
+### 与运算符（`&&`）{#logical-and-operator}
 
-Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.). Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`:
+你会遇到的另一个常见的快捷表达式是 [JavaScript 与（`&&`）运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.)。在 React 组件里，通常用在当条件成立时，你想渲染一些 JSX，**或者不做任何渲染**。使用 `&&`，你也可以实现仅当 `isPacked=true` 时，渲染勾选符号。
 
 ```js
 return (
@@ -268,9 +270,9 @@ return (
 );
 ```
 
-You can read this as *“if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing.”*
+你可以认为，*“当 `isPacked` 为真值时，则（`&&`）渲染勾选符号，否则，不渲染。”*
 
-Here it is in action:
+下面为具体的例子：
 
 <Sandpack>
 
@@ -286,19 +288,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Sally Ride 的行李清单</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="宇航服" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="带金箔的头盔" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Tam 的照片" 
         />
       </ul>
     </section>
@@ -308,30 +310,30 @@ export default function PackingList() {
 
 </Sandpack>
 
-A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place.
+当 [JavaScript && 表达式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) 的左侧（我们的条件）为 `true` 时，它则返回其右侧的值（在我们的例子里是勾选符号）。但条件的结果是 `false`，则整个表达式会变成 `false`。在 JSX 里，React 会将 `false` 视为一个“空值”，就像 `null` 或者 `undefined`，这样 React 就不会在这里进行任何渲染。
 
 
 <Gotcha>
 
-**Don't put numbers on the left side of `&&`.**
+**切勿将数字放在 `&&` 左侧.**
 
-To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing.
+JavaScript 会自动将左侧的值转换成布尔类型以判断条件成立与否。然而，如果左侧是 `0`，整个表达式将变成左侧的值（`0`），React 此时则会渲染 `0` 而不是不进行渲染。
 
-For example, a common mistake is to write code like `messageCount && <p>New messages</p>`. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself!
+例如，一个常见的错误是 `messageCount && <p>New messages</p>`。其原本是想当 `messageCount` 为 0 的时候不进行渲染，但实际上却渲染了 `0`。
 
-To fix it, make the left side a boolean: `messageCount > 0 && <p>New messages</p>`.
+为了更正，可以将左侧的值改成布尔类型：`messageCount > 0 && <p>New messages</p>`。
 
 </Gotcha>
 
-### Conditionally assigning JSX to a variable
+### 选择性地将 JSX 赋值给变量 {#conditionally-assigning-jsx-to-a-variable}
 
-When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name:
+当这些快捷方式妨碍写普通代码时，可以考虑使用 `if` 语句和变量。因为你可以使用 [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) 进行重复赋值，所以一开始你可以将你想展示的（这里指的是物品的名字）作为默认值赋予给该变量。
 
 ```js
 let itemContent = name;
 ```
 
-Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`:
+结合 `if` 语句，当 `isPacked` 为 `true` 时，将 JSX 表达式的值重新赋值给 `itemContent`：
 
 ```js
 if (isPacked) {
@@ -339,7 +341,7 @@ if (isPacked) {
 }
 ```
 
-[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX:
+[大括号 - JavaScript 的“新世界”。](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) 将变量用大括号嵌入在返回的 JSX 树中，来嵌套计算好的表达式与 JSX：
 
 ```js
 <li className="item">
@@ -347,7 +349,7 @@ if (isPacked) {
 </li>
 ```
 
-This style is the most verbose, but it's also the most flexible. Here it is in action:
+这种方式是最冗长的，但也是最灵活的。下面是相关的例子：
 
 <Sandpack>
 
@@ -367,19 +369,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Sally Ride 的行李清单</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="宇航服" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="带金箔的头盔" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Tam 的照片" 
         />
       </ul>
     </section>
@@ -389,7 +391,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-Like before, this works not only for text, but for arbitrary JSX too:
+跟之前的一样，这个方式不仅仅适用于文本，任意的 JSX 均适用：
 
 <Sandpack>
 
@@ -413,19 +415,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Sally Ride 的行李清单</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="宇航服" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="带金箔的头盔" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Tam 的照片" 
         />
       </ul>
     </section>
@@ -435,16 +437,16 @@ export default function PackingList() {
 
 </Sandpack>
 
-If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work.
+如果对 JavaScript 不熟悉，这些不同的风格一开始可能会让你感到不知所措。但是，学习这些将有助于你理解和写任何的 JavaScript 代码，而不仅仅是 React 组件。一开始可以选择一个你喜欢的来用，然后当你忘记其他的怎么用时，可以再翻阅这份参考资料。
 
 <Recap>
 
-* In React, you control branching logic with JavaScript.
-* You can return a JSX expression conditionally with an `if` statement.
-* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
-* In JSX, `{cond ? <A /> : <B />}` means *"if `cond`, render `<A />`, otherwise `<B />`"*.
-* In JSX, `{cond && <A />}` means *"if `cond`, render `<A />`, otherwise nothing"*.
-* The shortcuts are common, but you don't have to use them if you prefer plain `if`.
+* 在 React，你可以使用 JavaScript 来控制分支逻辑。
+* 你可以使用 `if` 语句来选择性地返回 JSX 表达式。
+* 你可以选择性地将一些 JSX 赋值给变量，然后用大括号将其嵌入到其他 JSX 中。
+* 在 JSX 中，`{cond ? <A /> : <B />}` 表示 *“当 `cond` 为真值时, 渲染 `<A />`，否则 `<B />`”*。
+* 在 JSX 中，`{cond && <A />}` 表示 *“当 `cond` 为真值时, 渲染 `<A />`，否则不进行渲染”*。
+* 快捷的表达式很常见，但如果你更倾向于使用 `if`，你也可以不使用它们，。
 
 </Recap>
 
@@ -452,9 +454,9 @@ If you're not familiar with JavaScript, this variety of styles might seem overwh
 
 <Challenges>
 
-### Show an icon for incomplete items with `? :`
+### 用 `? :` 给未完成的物品加上图标
 
-Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`.
+当 `isPacked` 不为 `true` 时，使用条件运算符 （`cond ? a : b`） 来渲染 ❌
 
 <Sandpack>
 
@@ -470,19 +472,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Sally Ride 的行李清单</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="宇航服" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="带金箔的头盔" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Tam 的照片" 
         />
       </ul>
     </section>
@@ -508,19 +510,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Sally Ride 的行李清单</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="宇航服" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="带金箔的头盔" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Tam 的照片" 
         />
       </ul>
     </section>
@@ -532,15 +534,15 @@ export default function PackingList() {
 
 </Solution>
 
-### Show the item importance with `&&`
+### 用 `&&` 展示物品的重要性
 
-In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero difficulty. Your item list should end up looking like this:
+在这个例子里，每个 `Item` 接收一个名为 `importance` 的数字类型属性。使用 `&&` 运算符渲染 “_（重要性：X）_”，以斜体呈现，但仅作用于那些难度值为非零的物品。你的物品列表后最终应该如下：
 
-* Space suit _(Importance: 9)_
-* Helmet with a golden leaf
-* Photo of Tam _(Importance: 6)_
+* 宇航服 _（重要性: 9）_
+* 带金箔的头盔
+* Tam 的照片 _（重要性: 6）_
 
-Don't forget to add a space between the two labels!
+注意别忘了在这两个标签之间加上一个空格！
 
 <Sandpack>
 
@@ -556,19 +558,19 @@ function Item({ name, importance }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Sally Ride 的行李清单</h1>
       <ul>
         <Item 
           importance={9} 
-          name="Space suit" 
+          name="宇航服" 
         />
         <Item 
           importance={0} 
-          name="Helmet with a golden leaf" 
+          name="带金箔的头盔" 
         />
         <Item 
           importance={6} 
-          name="Photo of Tam" 
+          name="Tam 的照片" 
         />
       </ul>
     </section>
@@ -580,7 +582,7 @@ export default function PackingList() {
 
 <Solution>
 
-This should do the trick:
+这样应该可以实现：
 
 <Sandpack>
 
@@ -591,7 +593,7 @@ function Item({ name, importance }) {
       {name}
       {importance > 0 && ' '}
       {importance > 0 &&
-        <i>(Importance: {importance})</i>
+        <i>（重要性: {importance}）</i>
       }
     </li>
   );
@@ -600,19 +602,19 @@ function Item({ name, importance }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Sally Ride 的行李清单</h1>
       <ul>
         <Item 
           importance={9} 
-          name="Space suit" 
+          name="宇航服" 
         />
         <Item 
           importance={0} 
-          name="Helmet with a golden leaf" 
+          name="带金箔的头盔" 
         />
         <Item 
           importance={6} 
-          name="Photo of Tam" 
+          name="Tam 的照片" 
         />
       </ul>
     </section>
@@ -622,15 +624,15 @@ export default function PackingList() {
 
 </Sandpack>
 
-Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result!
+需注意的是，你必须使用 `importance > 0 && ...` 而不是 `importance && ...`，这样如果 `importantce` 是 `0`， `0` 就不会被渲染出来了！
 
-In this solution, two separate conditions are used to insert a space between then name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
+在这个解决方案里，分别用了两个条件判断在名字和重要性标签里插入一个空格。另外，你也可以通过一个带前导空格的片段：`importance > 0 && <> <i>...</i></>`，或者将空格放在 `<i>` 标签内：`importance > 0 && <i> ...</i>`, 来实现相同的效果。
 
 </Solution>
 
-### Refactor a series of `? :` to `if` and variables
+### 用 `if` 和变量重构多余的 `? :`
 
-This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions.
+这个 `Drink` 组件使用了一系列的 `? :` 条件语句，根据 `name` 属性是 `"tea"` 还是 `"coffee"` 来显示不同的信息。问题是，每个饮品的信息是在不同的条件判断里的。请去掉那三个 `? :` 条件，使用一个 `if` 语句来重构这段代码。
 
 <Sandpack>
 
@@ -663,11 +665,11 @@ export default function DrinkList() {
 
 </Sandpack>
 
-Once you've refactored the code to use `if`, do you have further ideas on how to simplify it?
+当你使用 `if` 语句完成了以上代码的重构，你会不会有其他的想法去简化它？
 
 <Solution>
 
-There are multiple ways you could go about this, but here is one starting point:
+很多的方法可以解决这个问题，这是只是其中一个可以切入的点：
 
 <Sandpack>
 
@@ -710,9 +712,9 @@ export default function DrinkList() {
 
 </Sandpack>
 
-Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future.
+这个例子中，每种饮品的信息是放在一起的，而不是分散到多个条件判断里。这会使得以后增加更多的饮品更加容易。
 
-Another solution would be to remove the condition altogether by moving the information into objects:
+还可以通过将饮品信息存入对象中，从而去掉所有的条件判断语句：
 
 <Sandpack>
 
@@ -761,4 +763,4 @@ export default function DrinkList() {
 
 </Solution>
 
-</Challenges>
\ No newline at end of file
+</Challenges>

From 0041e9d92ace312e849e5b2727abd43dd93f482d Mon Sep 17 00:00:00 2001
From: Jiarong <alienover.l.d@gmail.com>
Date: Thu, 4 Nov 2021 23:51:56 +0800
Subject: [PATCH 2/6] docs(cn): updated translations suggested by @watonyweng

---
 beta/src/pages/learn/conditional-rendering.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md
index 02ab0b3860..465443f9ee 100644
--- a/beta/src/pages/learn/conditional-rendering.md
+++ b/beta/src/pages/learn/conditional-rendering.md
@@ -20,7 +20,7 @@ translators:
 
 ## 选择性地返回 JSX {#conditionally-returning-jsx}
 
-假设有一个 `PackingList` 组件，里面渲染多个 `Item` 组件，每个物品均可被标记为已被打包与否：
+假设有一个 `PackingList` 组件，里面渲染多个 `Item` 组件，每个物品可标记为打包与否：
 
 <Sandpack>
 
@@ -54,9 +54,9 @@ export default function PackingList() {
 
 </Sandpack>
 
-可以注意到的是，有些 `Item` 组件的 `isPacked` 属性是被设为 `true` 而不是 `false`。你想在那些满足 `isPacked={true}` 条件的物品旁加上一个勾选符号（✔）。
+需要注意的是，有些 `Item` 组件的 `isPacked` 属性是被设为 `true` 而不是 `false`。你可以在那些满足 `isPacked={true}` 条件的物品旁加上一个勾选符号（✔）。
 
-你可以用 [if/else 语句](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 去实现：
+你可以用 [if/else 语句](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 去判断：
 
 ```js
 if (isPacked) {

From fc8ba2035857f448c66a2b8c08aa76dda6389df4 Mon Sep 17 00:00:00 2001
From: Xavi Lee <awxiaoxian2020@163.com>
Date: Wed, 1 Mar 2023 18:23:00 +0800
Subject: [PATCH 3/6] Apply suggestions from code review

---
 beta/src/content/learn/conditional-rendering.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/beta/src/content/learn/conditional-rendering.md b/beta/src/content/learn/conditional-rendering.md
index ee17510606..a3b765e128 100644
--- a/beta/src/content/learn/conditional-rendering.md
+++ b/beta/src/content/learn/conditional-rendering.md
@@ -6,7 +6,7 @@ translators:
 
 <Intro>
 
-通常你的组件会需要根据不同的情况显示不同的内容。在 React，你可以通过使用 Javascript 的 `if` 语句，或者 `&&`，`? :` 运算符来选择性地渲染 JSX。
+通常你的组件会需要根据不同的情况显示不同的内容。在 React 中，你可以通过使用 JavaScript 的 `if` 语句、`&&` 和 `? :` 运算符来选择性地渲染 JSX。
 
 </Intro>
 
@@ -154,7 +154,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-实际上，在组件里返回 `null` 并不常见，因为这样会让想使用它的开发者感觉奇怪。通常，你可以在父组件里选择是否要渲染该组件。让我们接着往下看吧！
+实际上，在组件里返回 `null` 并不常见，因为这样会让想使用它的开发者感觉奇怪。通常情况下，你可以在父组件里选择是否要渲染该组件。让我们接着往下看吧！
 
 ## 选择性地包含 JSX {/*conditionally-including-jsx*/}
 
@@ -164,7 +164,7 @@ export default function PackingList() {
 <li className="item">{name} ✔</li>
 ```
 
-相似于
+和下面的写法很像：
 
 ```js
 <li className="item">{name}</li>

From 2a73dc885e390a1e87b3a6a31798d02c14d31efe Mon Sep 17 00:00:00 2001
From: Xavi Lee <awxiaoxian2020@163.com>
Date: Wed, 1 Mar 2023 18:23:34 +0800
Subject: [PATCH 4/6] Update beta/src/content/learn/conditional-rendering.md

---
 beta/src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/conditional-rendering.md b/beta/src/content/learn/conditional-rendering.md
index a3b765e128..46ddc0bbb2 100644
--- a/beta/src/content/learn/conditional-rendering.md
+++ b/beta/src/content/learn/conditional-rendering.md
@@ -714,7 +714,7 @@ export default function DrinkList() {
 
 </Sandpack>
 
-这个例子中，每种饮品的信息是放在一起的，而不是分散到多个条件判断里。这会使得以后增加更多的饮品更加容易。
+这个例子中，每种饮品的信息是放在一起的，而没有将其分散到多个条件判断里。这会让我们以后可以更容易地增加更多的饮品。
 
 还可以通过将饮品信息存入对象中，从而去掉所有的条件判断语句：
 

From d512f88a0410852c039cd7ab131a1cfcd8df7929 Mon Sep 17 00:00:00 2001
From: Xavi Lee <awxiaoxian2020@163.com>
Date: Wed, 1 Mar 2023 18:23:42 +0800
Subject: [PATCH 5/6] Update beta/src/content/learn/conditional-rendering.md

---
 beta/src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/conditional-rendering.md b/beta/src/content/learn/conditional-rendering.md
index 46ddc0bbb2..0c03a6ed88 100644
--- a/beta/src/content/learn/conditional-rendering.md
+++ b/beta/src/content/learn/conditional-rendering.md
@@ -104,7 +104,7 @@ export default function PackingList() {
 
 动手尝试一下，看看各种情况会出现什么不同的结果！
 
-留意这里你是怎么使用 JavaScript 的 `if` 和 `return` 语句来写分支逻辑。在 React，是由 JavaScript 来处理控制流的（比如条件)。
+留意这里你是怎么使用 JavaScript 的 `if` 和 `return` 语句来写分支逻辑。在 React 中，是由 JavaScript 来处理控制流的（比如条件）。
 
 ### 选择性地返回 `null` {/*conditionally-returning-nothing-with-null*/}
 

From 0979ac71a635831b4e16c9d7f0d0b74210936b90 Mon Sep 17 00:00:00 2001
From: Xavi Lee <awxiaoxian2020@163.com>
Date: Thu, 2 Mar 2023 10:37:01 +0800
Subject: [PATCH 6/6] Apply suggestions from code review

skip ci

Co-authored-by: TimLi <daochouwangu@gmail.com>
---
 beta/src/content/learn/conditional-rendering.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/beta/src/content/learn/conditional-rendering.md b/beta/src/content/learn/conditional-rendering.md
index 0c03a6ed88..623a25bf8c 100644
--- a/beta/src/content/learn/conditional-rendering.md
+++ b/beta/src/content/learn/conditional-rendering.md
@@ -12,7 +12,7 @@ translators:
 
 <YouWillLearn>
 
-* 如何根据不同条件返回不同地 JSX
+* 如何根据不同条件返回不同的 JSX
 * 如何根据不同条件包含或者去掉部分 JSX
 * 一些你会在 React 代码库里遇到的常用的条件语法快捷表达式
 
@@ -108,7 +108,7 @@ export default function PackingList() {
 
 ### 选择性地返回 `null` {/*conditionally-returning-nothing-with-null*/}
 
-在一些情况下，你不想有任何东西进行渲染。比如，假设你不想显示已经打包好的物品。但一个组件必须返回一些东西。这种情况下，你可以直接返回 `null`。
+在一些情况下，你不想有任何东西进行渲染。比如，你不想显示已经打包好的物品。但一个组件必须返回一些东西。这种情况下，你可以直接返回 `null`。
 
 ```js
 if (isPacked) {
@@ -158,7 +158,7 @@ export default function PackingList() {
 
 ## 选择性地包含 JSX {/*conditionally-including-jsx*/}
 
-在之前的例子里，你通过在组件内部控制哪些 JSX 树（如果有的话！）会返回。你可能已经发现了在渲染输出里会有一些重复的内容：
+在之前的例子里，你在组件内部控制哪些 JSX 树（如果有的话！）会返回。你可能已经发现了在渲染输出里会有一些重复的内容：
 
 ```js
 <li className="item">{name} ✔</li>
@@ -204,13 +204,13 @@ return (
 );
 ```
 
-你可以认为，*“如果 `isPacked=true` 时，则（`?`）渲染 `name + ' ✔'`，否则（`:`）渲染 `name`。”*
+你可以认为，*“如果 `isPacked` 为 true 时，则（`?`）渲染 `name + ' ✔'`，否则（`:`）渲染 `name`。”*
 
 <DeepDive>
 
 #### 两个例子完全一样吗？ {/*are-these-two-examples-fully-equivalent*/}
 
-如果你之前是习惯面向对象开发的，你可能会认为上面的两个例子略有不同，因为其中一个可能会创建两个不同的 `<li>` “实例”。但 JSX 元素不是“实例”，因为它们没有内部状态也不是真是的 DOM 节点。它们只是一些简单的描述，就像图纸一样。所以上面这两个例子，事实上，是完全相同的。在 [状态的保持和重置](/learn/preserving-and-resetting-state) 里会深入探讨其原因。
+如果你之前是习惯面向对象开发的，你可能会认为上面的两个例子略有不同，因为其中一个可能会创建两个不同的 `<li>` “实例”。但 JSX 元素不是“实例”，因为它们没有内部状态也不是真是的 DOM 节点。它们只是一些简单的描述，就像图纸一样。所以上面这两个例子事实上是完全相同的。在 [状态的保持和重置](/learn/preserving-and-resetting-state) 里会深入探讨其原因。
 
 </DeepDive>
 
@@ -262,7 +262,7 @@ export default function PackingList() {
 
 ### 与运算符（`&&`） {/*logical-and-operator-*/}
 
-你会遇到的另一个常见的快捷表达式是 [JavaScript 与（`&&`）运算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.)。在 React 组件里，通常用在当条件成立时，你想渲染一些 JSX，**或者不做任何渲染**。使用 `&&`，你也可以实现仅当 `isPacked=true` 时，渲染勾选符号。
+你会遇到的另一个常见的快捷表达式是 [JavaScript 与（`&&`）运算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.)。在 React 组件里，通常用在当条件成立时，你想渲染一些 JSX，**或者不做任何渲染**。使用 `&&`，你也可以实现仅当 `isPacked` 为 `true` 时，渲染勾选符号。
 
 ```js
 return (
@@ -628,7 +628,7 @@ export default function PackingList() {
 
 需注意的是，你必须使用 `importance > 0 && ...` 而不是 `importance && ...`，这样如果 `importantce` 是 `0`， `0` 就不会被渲染出来了！
 
-在这个解决方案里，分别用了两个条件判断在名字和重要性标签里插入一个空格。另外，你也可以通过一个带前导空格的片段：`importance > 0 && <> <i>...</i></>`，或者将空格放在 `<i>` 标签内：`importance > 0 && <i> ...</i>`, 来实现相同的效果。
+在这个解决方案里，分别用了两个条件判断在名字和重要性标签里插入一个空格。另外，你也可以通过一个带前导空格的 fragment ：`importance > 0 && <> <i>...</i></>`，或者将空格放在 `<i>` 标签内：`importance > 0 && <i> ...</i>`, 来实现相同的效果。
 
 </Solution>