docs(cn): translate content/docs/conditional-rendering.md into Chinese #92

pppluto · 2019-02-12T08:24:41Z

No description provided.

yuqingc · 2019-02-13T02:36:38Z

Please change your PR title

yuqingc · 2019-02-13T02:47:52Z

content/docs/conditional-rendering.md

@@ -44,13 +44,13 @@ ReactDOM.render(

 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)

-This example renders a different greeting depending on the value of `isLoggedIn` prop.
+这个例子展示了如果根据 `isLoggedIn` 的值来渲染不同的问候语。


Suggested change

这个例子展示了如果根据 `isLoggedIn` 的值来渲染不同的问候语。

这个例子展示了根据 `isLoggedIn` 的值来渲染不同的问候语。

yuqingc · 2019-02-13T02:48:31Z

content/docs/conditional-rendering.md


-### Inline If with Logical && Operator
+### 与运算符


Suggested change

### 与运算符

### && 运算符

yuqingc · 2019-02-13T02:51:00Z

content/docs/conditional-rendering.md


-Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
+另一种条件渲染的方法是使用 JavaScript 中的条件运算符 [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。


你这句翻译为条件运算符，上边翻译成三目运算符，需要统一一下

pppluto · 2019-02-13T04:04:02Z

@yuqingc 👍
我们可以加入少量的提醒么 (例如使用 && 运算符 进行条件渲染时，左边最好是 Bool 值) ，还是严格遵照原文翻译

yuqingc · 2019-02-13T06:01:41Z

@yuqingc +1
我们可以加入少量的提醒么 (例如使用 && 运算符 进行条件渲染时，左边最好是 Bool 值) ，还是严格遵照原文翻译

只要不改变原文的意思就可以。那样的提示，估计不行。

yhsunshining

感谢您的工作！
有一些格式和标准术语上的小改动，有些修改可能带有个人风格，可以大家一起看一下。
thx again.

yhsunshining · 2019-02-23T12:11:14Z

content/docs/conditional-rendering.md


-Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
+React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 操作符 [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 或者 [条件运算符](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 去创建元素来表现当前的状态，然后让 React 会根据他们来更新 UI。


operator 统一使用 运算符 会不会更好?

最后让和会好像有点重复。

他们代指组件的状态，感觉用它们会好一点。

Suggested change

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 操作符 [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 或者 [条件运算符](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 去创建元素来表现当前的状态，然后让 React 会根据他们来更新 UI。

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 或者 [条件运算符](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 去创建元素来表现当前的状态，然后 React 会根据其更新 UI。

yhsunshining · 2019-02-23T12:24:07Z

content/docs/conditional-rendering.md

@@ -44,13 +44,13 @@ ReactDOM.render(

 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)


Try it on CodePen 是否需要翻译一下？ issue 中有相关讨论但似乎没有最后的定论。

yhsunshining · 2019-02-23T12:28:08Z

content/docs/conditional-rendering.md

@@ -44,13 +44,13 @@ ReactDOM.render(

 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)

-This example renders a different greeting depending on the value of `isLoggedIn` prop.
+这个例子展示了根据 `isLoggedIn` 的值来渲染不同的问候语。


建议统一术语使用示例。

展示了好像有些冗余，去掉更流畅些。

Suggested change

这个例子展示了根据 `isLoggedIn` 的值来渲染不同的问候语。

这个示例根据 `isLoggedIn` 的值来渲染不同的问候语。

因为感觉 示例 中的内容才是根据的主语，所以加了几个字。

yhsunshining · 2019-02-23T12:34:45Z

content/docs/conditional-rendering.md


-You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
+你可以使用变量来储存元素。 它可以帮组你有条件的渲染组件的一部分，而其他的渲染部分并不会因此而改变。


指出部分语法错误，望不要介意。有条件的渲染 -> 有条件地渲染
另帮组 -> 帮助

Suggested change

你可以使用变量来储存元素。它可以帮组你有条件的渲染组件的一部分，而其他的渲染部分并不会因此而改变。

你可以使用变量来储存元素。它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。

yhsunshining · 2019-02-23T12:38:53Z

content/docs/conditional-rendering.md


-It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
+它将根据当前的状态来渲染 `<LoginButton />` 或者 `<LogoutButton />`。它也将渲染上一个例子中的 `<Greeting />`。


Suggested change

它将根据当前的状态来渲染 `<LoginButton />` 或者 `<LogoutButton />`。它也将渲染上一个例子中的 `<Greeting />`。

它将根据当前的状态来渲染 `<LoginButton />` 或者 `<LogoutButton />`。它也将渲染上一个示例中的 `<Greeting />`。

yhsunshining · 2019-02-23T13:14:17Z

content/docs/conditional-rendering.md


-Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
+另一种条件渲染的方法是使用 JavaScript 中的三目运算符 [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。


Suggested change

另一种条件渲染的方法是使用 JavaScript 中的三目运算符 [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。

另一种内联条件渲染的方法是使用 JavaScript 中的条件运算符 [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。

yhsunshining · 2019-02-23T13:15:08Z

content/docs/conditional-rendering.md


-In the example below, we use it to conditionally render a small block of text.
+在下面这个例子中，我们用它来条件渲染一小段文本


Suggested change

在下面这个例子中，我们用它来条件渲染一小段文本

在下面的示例中，我们用它来条件渲染一小段文本

yhsunshining · 2019-02-23T13:24:57Z

content/docs/conditional-rendering.md


-In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output.
+在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`。


Suggested change

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`。

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null` 而不是其渲染结果。

yhsunshining · 2019-02-23T13:27:39Z

content/docs/conditional-rendering.md


-In the example below, the `<WarningBanner />` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render:
+下面这个例子中，`<WarningBanner />` 根据属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将隐藏起来:


可以直译的情况下，直译可能会好一点。

Suggested change

下面这个例子中，`<WarningBanner />` 根据属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将隐藏起来:

下面的示例中，`<WarningBanner />` 根据 prop 属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将不会渲染：

``

yhsunshining · 2019-02-23T13:39:41Z

content/docs/conditional-rendering.md

@@ -186,13 +186,13 @@ render() {
 }
 ```

-Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+就像在 JavaScript 中一样，你可以根据你们团队的习惯来选择更易读的代码风格。在这里提醒一下，如果条件变得过于复杂，那你应该考虑考虑[提取组件](/docs/components-and-props.html#extracting-components) 了。


建议统一格式，链接两边是否空格，我看本篇中选择了空格的风格，那么此处最好统一。

Suggested change

就像在 JavaScript 中一样，你可以根据你们团队的习惯来选择更易读的代码风格。在这里提醒一下，如果条件变得过于复杂，那你应该考虑考虑[提取组件](/docs/components-and-props.html#extracting-components) 了。

就像在 JavaScript 中一样，你可以根据你们团队的习惯来选择更易读的代码风格。在这里提醒一下，如果条件变得过于复杂，那你应该考虑考虑 [提取组件](/docs/components-and-props.html#extracting-components) 了。

pppluto · 2019-02-25T02:59:52Z

@yhsunshining
关于几个标题中 inline 的翻译问题，我自己没想到一个舒服的译法，似乎不翻译更简洁，也不大影响理解。 L121 中也提示了下面几种都是 inline 的用法。

QC-L · 2019-02-26T10:07:41Z

content/docs/conditional-rendering.md

@@ -8,11 +8,11 @@ redirect_from:
  - "tips/false-in-jsx.html"
 ---

-In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
+在 React 中，你可以创建一些明确的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。


Suggested change

在 React 中，你可以创建一些明确的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。

在 React 中，你可以创建不同的组件来封装你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。

QC-L · 2019-02-26T10:09:29Z

content/docs/conditional-rendering.md


-Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
+React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 或者 [条件运算符](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。


Suggested change

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 或者 [条件运算符](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

React 中的条件渲染和 JavaScript 中的条件运算工作原理一致，使用 JavaScript 运算符 [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 或者[条件运算符](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

链接左右不加空格

QC-L · 2019-02-26T10:11:01Z

content/docs/conditional-rendering.md


-Consider these two components:
+来看看这两个组件:


Suggested change

来看看这两个组件:

观察这两个组件：

QC-L · 2019-02-26T10:11:25Z

content/docs/conditional-rendering.md

@@ -24,7 +24,7 @@ function GuestGreeting(props) {
 }
 ```

-We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in:
+我们再创建一个 `Greeting` 组件，它会根据用户是否登录来决定显示上面的哪一个组件。


Suggested change

我们再创建一个 `Greeting` 组件，它会根据用户是否登录来决定显示上面的哪一个组件。

再创建一个 `Greeting` 组件，它会根据用户是否登录来决定显示上面的哪一个组件。

QC-L · 2019-02-26T10:12:18Z

content/docs/conditional-rendering.md


-Consider these two new components representing Logout and Login buttons:
+来看看这两个组件，它们分别代表了注销和登录按钮：


Suggested change

来看看这两个组件，它们分别代表了注销和登录按钮：

观察这两个组件，它们分别代表了注销和登录按钮：

QC-L · 2019-02-26T10:12:42Z

content/docs/conditional-rendering.md

@@ -70,9 +70,9 @@ function LogoutButton(props) {
 }
 ```

-In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`.
+在下面的示例中，我们将创建一个名叫 `LoginControl` 的 [有状态的组件](/docs/state-and-lifecycle.html#adding-local-state-to-a-class)


Suggested change

在下面的示例中，我们将创建一个名叫 `LoginControl` 的 [有状态的组件](/docs/state-and-lifecycle.html#adding-local-state-to-a-class)

在下面的示例中，我们将创建一个名叫 `LoginControl` 的[有状态的组件](/docs/state-and-lifecycle.html#adding-local-state-to-a-class)。

QC-L · 2019-02-26T10:13:25Z

content/docs/conditional-rendering.md


-It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
+它将根据当前的状态来渲染 `<LoginButton />` 或者 `<LogoutButton />`。它也将渲染上一个示例中的 `<Greeting />`。


Suggested change

它将根据当前的状态来渲染 `<LoginButton />` 或者 `<LogoutButton />`。它也将渲染上一个示例中的 `<Greeting />`。

它将根据当前的状态来渲染 `<LoginButton />` 或者 `<LogoutButton />`。同时它还会渲染上一个示例中的 `<Greeting />`。

QC-L · 2019-02-26T10:14:50Z

content/docs/conditional-rendering.md


-While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.
+声明一个变量并使用 `if` 语句是条件渲染的一个不错的方式，但有时你可能会想使用更简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。


Suggested change

声明一个变量并使用 `if` 语句是条件渲染的一个不错的方式，但有时你可能会想使用更简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。

声明一个变量并使用 `if` 语句进行条件渲染是不错的方式，但有时你可能会想使用更为简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。

QC-L · 2019-02-26T10:18:21Z

content/docs/conditional-rendering.md


-You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element:
+通过花括号包裹代码，你可以 [在 JSX 中嵌入任何表达式](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行一个元素的条件渲染。


Suggested change

通过花括号包裹代码，你可以 [在 JSX 中嵌入任何表达式](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行一个元素的条件渲染。

通过花括号包裹代码，你可以[在 JSX 中嵌入任何表达式](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。

QC-L · 2019-02-26T10:28:51Z

content/docs/conditional-rendering.md

@@ -169,7 +169,7 @@ render() {
 }
 ```

-It can also be used for larger expressions although it is less obvious what's going on:
+同样的，它也可以用在较大的表达式中，虽然看起来不是太直观：


Suggested change

同样的，它也可以用在较大的表达式中，虽然看起来不是太直观：

同样的，它还可以用于较为复杂的表达式中，尽管看起来不是很直观：

QC-L · 2019-02-26T10:30:07Z

content/docs/conditional-rendering.md

@@ -186,13 +186,13 @@ render() {
 }
 ```

-Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+就像在 JavaScript 中一样，你可以根据你们团队的习惯来选择更易读的代码风格。在这里提醒一下，如果条件变得过于复杂，那你应该考虑考虑 [提取组件](/docs/components-and-props.html#extracting-components) 了。


Suggested change

就像在 JavaScript 中一样，你可以根据你们团队的习惯来选择更易读的代码风格。在这里提醒一下，如果条件变得过于复杂，那你应该考虑考虑 [提取组件](/docs/components-and-props.html#extracting-components) 了。

就像在 JavaScript 中一样，你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是，如果条件变得过于复杂，那你应该考虑如何[提取组件](/docs/components-and-props.html#extracting-components)。

QC-L · 2019-02-26T10:33:31Z

content/docs/conditional-rendering.md


-In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output.
+在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`，而不是其渲染结果。


Suggested change

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`，而不是其渲染结果。

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 `render` 方法直接返回 `null`，而不进行任何渲染。

QC-L · 2019-02-26T10:39:41Z

content/docs/conditional-rendering.md


-In the example below, the `<WarningBanner />` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render:
+下面的示例中，`<WarningBanner />` 根据 prop 属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将不会渲染:


Suggested change

下面的示例中，`<WarningBanner />` 根据 prop 属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将不会渲染:

下面的示例中，`<WarningBanner />` 会根据 prop 中的 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件则不会渲染:

QC-L · 2019-02-26T10:40:21Z

content/docs/conditional-rendering.md


-Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called.
+在组件的 `render` 方法中返回 `null` 并不会影响组件的生命周期方法的回调。例如，上面这个示例中，`componentDidUpdate` 依然会被调用。


Suggested change

在组件的 `render` 方法中返回 `null` 并不会影响组件的生命周期方法的回调。例如，上面这个示例中，`componentDidUpdate` 依然会被调用。

在组件的 `render` 方法中返回 `null` 并不会影响组件的生命周期。例如，上面这个示例中，`componentDidUpdate` 依然会被调用。

hijiangtao

LGTM

content/docs/conditional-rendering.md

#92)

reactjs#92)

pppluto added 4 commits February 12, 2019 16:04

draft

f05d652

remove english doc

e63b705

format

4a8dc67

typo

7428e54

QC-L added the Pending Review 已翻译，待校对阶段 label Feb 12, 2019

yuqingc requested changes Feb 13, 2019

View reviewed changes

pppluto changed the title ~~Condition render~~ docs(cn): Condition render Feb 13, 2019

improve

ca819c6

QC-L mentioned this pull request Feb 14, 2019

OLD CLAIMS #4

Closed

hijiangtao mentioned this pull request Feb 15, 2019

[READ ONLY] Translation Check Sheet #98

Closed

yhsunshining suggested changes Feb 23, 2019

View reviewed changes

hijiangtao added Pending Modify 已校对，待修改阶段 and removed Pending Review 已翻译，待校对阶段 labels Feb 24, 2019

pppluto added 2 commits February 25, 2019 11:04

improve

ba733dc

code pen

6f4f1f2

pppluto changed the title ~~docs(cn): Condition render~~ docs(cn): translate content/docs/conditional-rendering.md into Chinese Feb 25, 2019

QC-L reviewed Feb 26, 2019

View reviewed changes

more neutrally

e52ca0a

hijiangtao reviewed Feb 26, 2019

View reviewed changes

content/docs/conditional-rendering.md Outdated Show resolved Hide resolved

content/docs/conditional-rendering.md Outdated Show resolved Hide resolved

Update conditional-rendering.md

6d44321

hijiangtao added Pending Re-Review 已修改，待审校阶段 and removed Pending Modify 已校对，待修改阶段 labels Feb 26, 2019

hijiangtao approved these changes Feb 26, 2019

View reviewed changes

Update conditional-rendering.md

c9ae115

QC-L approved these changes Feb 27, 2019

View reviewed changes

QC-L merged commit 538ffdc into reactjs:cn Feb 27, 2019

QC-L pushed a commit that referenced this pull request Feb 27, 2019

docs(cn): translate content/docs/conditional-rendering.md into Chinese (

0041e27

#92)

OhIAmFine pushed a commit to OhIAmFine/zh-hans.reactjs.org that referenced this pull request May 6, 2019

docs(cn): translate content/docs/conditional-rendering.md into Chinese (

12811ec

reactjs#92)

	这个例子展示了如果根据 `isLoggedIn` 的值来渲染不同的问候语。
	这个例子展示了根据 `isLoggedIn` 的值来渲染不同的问候语。


		Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
		另一种条件渲染的方法是使用 JavaScript 中的条件运算符 [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。


		Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
		React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 操作符 [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 或者 [条件运算符](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 去创建元素来表现当前的状态，然后让 React 会根据他们来更新 UI。

		@@ -44,13 +44,13 @@ ReactDOM.render(

		[Try it on CodePen](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)

	这个例子展示了根据 `isLoggedIn` 的值来渲染不同的问候语。
	这个示例根据 `isLoggedIn` 的值来渲染不同的问候语。


		You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
		你可以使用变量来储存元素。它可以帮组你有条件的渲染组件的一部分，而其他的渲染部分并不会因此而改变。

	你可以使用变量来储存元素。它可以帮组你有条件的渲染组件的一部分，而其他的渲染部分并不会因此而改变。
	你可以使用变量来储存元素。它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。


		It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
		它将根据当前的状态来渲染 `<LoginButton />` 或者 `<LogoutButton />`。它也将渲染上一个例子中的 `<Greeting />`。


		Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
		另一种条件渲染的方法是使用 JavaScript 中的三目运算符 [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。

	另一种条件渲染的方法是使用 JavaScript 中的三目运算符 [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。
	另一种内联条件渲染的方法是使用 JavaScript 中的条件运算符 [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。


		In the example below, we use it to conditionally render a small block of text.
		在下面这个例子中，我们用它来条件渲染一小段文本

	在下面这个例子中，我们用它来条件渲染一小段文本
	在下面的示例中，我们用它来条件渲染一小段文本


		In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output.
		在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`。


		In the example below, the `<WarningBanner />` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render:
		下面这个例子中，`<WarningBanner />` 根据属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将隐藏起来:

	下面这个例子中，`<WarningBanner />` 根据属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将隐藏起来:
	下面的示例中，`<WarningBanner />` 根据 prop 属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将不会渲染：
	``

	就像在 JavaScript 中一样，你可以根据你们团队的习惯来选择更易读的代码风格。在这里提醒一下，如果条件变得过于复杂，那你应该考虑考虑[提取组件](/docs/components-and-props.html#extracting-components) 了。
	就像在 JavaScript 中一样，你可以根据你们团队的习惯来选择更易读的代码风格。在这里提醒一下，如果条件变得过于复杂，那你应该考虑考虑 [提取组件](/docs/components-and-props.html#extracting-components) 了。

	在 React 中，你可以创建一些明确的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。
	在 React 中，你可以创建不同的组件来封装你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。

	我们再创建一个 `Greeting` 组件，它会根据用户是否登录来决定显示上面的哪一个组件。
	再创建一个 `Greeting` 组件，它会根据用户是否登录来决定显示上面的哪一个组件。


		Consider these two new components representing Logout and Login buttons:
		来看看这两个组件，它们分别代表了注销和登录按钮：

	来看看这两个组件，它们分别代表了注销和登录按钮：
	观察这两个组件，它们分别代表了注销和登录按钮：

docs(cn): translate content/docs/conditional-rendering.md into Chinese #92

docs(cn): translate content/docs/conditional-rendering.md into Chinese #92

Conversation

pppluto commented Feb 12, 2019

yuqingc commented Feb 13, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pppluto commented Feb 13, 2019 • edited Loading

yuqingc commented Feb 13, 2019

yhsunshining left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pppluto Feb 25, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pppluto commented Feb 25, 2019

QC-L Feb 26, 2019 • edited Loading

Choose a reason for hiding this comment

QC-L Feb 26, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

QC-L Feb 26, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hijiangtao left a comment

Choose a reason for hiding this comment

pppluto commented Feb 13, 2019 •

edited

Loading

pppluto Feb 25, 2019 •

edited

Loading

QC-L Feb 26, 2019 •

edited

Loading

QC-L Feb 26, 2019 •

edited

Loading

QC-L Feb 26, 2019 •

edited

Loading

	在下面的示例中，我们将创建一个名叫 `LoginControl` 的 [有状态的组件](/docs/state-and-lifecycle.html#adding-local-state-to-a-class)
	在下面的示例中，我们将创建一个名叫 `LoginControl` 的[有状态的组件](/docs/state-and-lifecycle.html#adding-local-state-to-a-class)。


		While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.
		声明一个变量并使用 `if` 语句是条件渲染的一个不错的方式，但有时你可能会想使用更简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。

	声明一个变量并使用 `if` 语句是条件渲染的一个不错的方式，但有时你可能会想使用更简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。
	声明一个变量并使用 `if` 语句进行条件渲染是不错的方式，但有时你可能会想使用更为简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。


		You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element:
		通过花括号包裹代码，你可以 [在 JSX 中嵌入任何表达式](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行一个元素的条件渲染。

	通过花括号包裹代码，你可以 [在 JSX 中嵌入任何表达式](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行一个元素的条件渲染。
	通过花括号包裹代码，你可以[在 JSX 中嵌入任何表达式](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。

	同样的，它也可以用在较大的表达式中，虽然看起来不是太直观：
	同样的，它还可以用于较为复杂的表达式中，尽管看起来不是很直观：

	就像在 JavaScript 中一样，你可以根据你们团队的习惯来选择更易读的代码风格。在这里提醒一下，如果条件变得过于复杂，那你应该考虑考虑 [提取组件](/docs/components-and-props.html#extracting-components) 了。
	就像在 JavaScript 中一样，你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是，如果条件变得过于复杂，那你应该考虑如何[提取组件](/docs/components-and-props.html#extracting-components)。

	在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`，而不是其渲染结果。
	在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 `render` 方法直接返回 `null`，而不进行任何渲染。

	下面的示例中，`<WarningBanner />` 根据 prop 属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将不会渲染:
	下面的示例中，`<WarningBanner />` 会根据 prop 中的 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件则不会渲染:


		Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called.
		在组件的 `render` 方法中返回 `null` 并不会影响组件的生命周期方法的回调。例如，上面这个示例中，`componentDidUpdate` 依然会被调用。