From f05d6520e871f3176a56af9bb1d7cd49d4601c28 Mon Sep 17 00:00:00 2001 From: MrPluto <457808167@qq.com> Date: Tue, 12 Feb 2019 16:04:45 +0800 Subject: [PATCH 01/10] draft --- content/docs/conditional-rendering.md | 32 +++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 5d5c829f34..e740938fdc 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -14,6 +14,12 @@ Conditional rendering in React works the same way conditions work in JavaScript. Consider these two components: +在 React 中，你可以创建一些明确的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。 + +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。 + +来看看这两个组件: + ```js function UserGreeting(props) { return

Welcome back!

; @@ -25,6 +31,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` 组件，它会根据用户是否登录来决定显示上面的哪一个组件。 ```javascript{3-7,11,12} function Greeting(props) { @@ -45,12 +52,16 @@ 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` 的值来渲染不同的问候语。 ### Element Variables +### 元素变量 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. +你可以使用变量来储存元素。 它可以帮组你有条件的渲染组件的一部分，而其他的渲染部分并不会因此而改变。 Consider these two new components representing Logout and Login buttons: +来看看这两个组件，它们分别代表了注销和登录按钮： ```js function LoginButton(props) { @@ -71,8 +82,10 @@ 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) It will render either `` or `` depending on its current state. It will also render a `` from the previous example: +它将根据当前的状态来渲染 `` 或者 ``。它也将渲染上一个例子中的 ``。 ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -119,10 +132,13 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) 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 中做条件渲染的方法。 ### Inline If with Logical && Operator +### 与运算符 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 中的逻辑与 && 操作符。它可以很方便的来进行一个元素的条件渲染。 ```js{6-10} function Mailbox(props) { @@ -152,12 +168,20 @@ It works because in JavaScript, `true && expression` always evaluates to `expres Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it. +之所以能这样做，是因为在 JavaScript 中， `true && expression` 总是会返回 `expression`, 而 `false && expression` 总是会返回 `false`。 +(PS: 确保左边的值是 `Bool` 值) + ### Inline If-Else with Conditional Operator +### 三目运算符 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). In the example below, we use it to conditionally render a small block of text. +另一种条件渲染的方法是使用 JavaScript 中的条件运算符 [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。 + +在下面这个例子中，我们用它来条件渲染一小段文本 + ```javascript{5} render() { const isLoggedIn = this.state.isLoggedIn; @@ -170,6 +194,7 @@ render() { ``` It can also be used for larger expressions although it is less obvious what's going on: +同样的，它也可以用在较大的表达式中， 虽然看起来不是太直观。 ```js{5,7,9} render() { @@ -188,12 +213,17 @@ 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) 了。 + ### Preventing Component from Rendering +### 阻止组件渲染 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. In the example below, the `` 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: +在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`。 + ```javascript{2-4,29} function WarningBanner(props) { if (!props.warn) { @@ -241,3 +271,5 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) 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` 依然会被调用。 From e63b705602d8dbe6b9bbf127cdc4113c1f5aa4c7 Mon Sep 17 00:00:00 2001 From: MrPluto <457808167@qq.com> Date: Tue, 12 Feb 2019 16:17:53 +0800 Subject: [PATCH 02/10] remove english doc --- content/docs/conditional-rendering.md | 40 +++++++-------------------- 1 file changed, 10 insertions(+), 30 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index e740938fdc..7f9435515a 100644 --- a/content/docs/conditional-rendering.md +++ b/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 中，你可以创建一些明确的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。 -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。 -Consider these two components: +来看看这两个组件: 在 React 中，你可以创建一些明确的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。 @@ -30,7 +30,6 @@ function GuestGreeting(props) { } ``` -We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in: 我们再创建一个 `Greeting` 组件，它会根据用户是否登录来决定显示上面的哪一个组件。 ```javascript{3-7,11,12} @@ -51,16 +50,12 @@ 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` 的值来渲染不同的问候语。 -### Element Variables ### 元素变量 -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. 你可以使用变量来储存元素。 它可以帮组你有条件的渲染组件的一部分，而其他的渲染部分并不会因此而改变。 -Consider these two new components representing Logout and Login buttons: 来看看这两个组件，它们分别代表了注销和登录按钮： ```js @@ -81,10 +76,8 @@ 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) -It will render either `` or `` depending on its current state. It will also render a `` from the previous example: 它将根据当前的状态来渲染 `` 或者 ``。它也将渲染上一个例子中的 ``。 ```javascript{20-25,29,30} @@ -131,13 +124,10 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -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 中做条件渲染的方法。 -### Inline If with Logical && Operator ### 与运算符 -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 中的逻辑与 && 操作符。它可以很方便的来进行一个元素的条件渲染。 ```js{6-10} @@ -164,19 +154,15 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) -It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`. - -Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it. - 之所以能这样做，是因为在 JavaScript 中， `true && expression` 总是会返回 `expression`, 而 `false && expression` 总是会返回 `false`。 -(PS: 确保左边的值是 `Bool` 值) -### Inline If-Else with Conditional Operator +因此，如果条件是 `true`，`&&` 右侧的元素就会被渲染，如果是 `false`，React 会忽略并跳过它 + ### 三目运算符 -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)。 -In the example below, we use it to conditionally render a small block of text. +在下面这个例子中，我们用它来条件渲染一小段文本 另一种条件渲染的方法是使用 JavaScript 中的条件运算符 [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。 @@ -193,8 +179,7 @@ render() { } ``` -It can also be used for larger expressions although it is less obvious what's going on: -同样的，它也可以用在较大的表达式中， 虽然看起来不是太直观。 +同样的，它也可以用在较大的表达式中， 虽然看起来不是太直观： ```js{5,7,9} render() { @@ -211,16 +196,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) 了。 -### Preventing Component from Rendering ### 阻止组件渲染 -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 `` 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: +下面这个例子中，`` 根据属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将隐藏起来: 在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`。 @@ -270,6 +252,4 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -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` 依然会被调用。 From 4a8dc67d2e458eeef42eff5fc7b6a93559b87d14 Mon Sep 17 00:00:00 2001 From: MrPluto <457808167@qq.com> Date: Tue, 12 Feb 2019 16:19:44 +0800 Subject: [PATCH 03/10] format --- content/docs/conditional-rendering.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 7f9435515a..33135bdbac 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -14,12 +14,6 @@ React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 操作 来看看这两个组件: -在 React 中，你可以创建一些明确的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。 - -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。 - -来看看这两个组件: - ```js function UserGreeting(props) { return

Welcome back!

; @@ -154,7 +148,7 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) -之所以能这样做，是因为在 JavaScript 中， `true && expression` 总是会返回 `expression`, 而 `false && expression` 总是会返回 `false`。 +之所以能这样做，是因为在 JavaScript 中，`true && expression` 总是会返回 `expression`, 而 `false && expression` 总是会返回 `false`。 因此，如果条件是 `true`，`&&` 右侧的元素就会被渲染，如果是 `false`，React 会忽略并跳过它 @@ -179,7 +173,7 @@ render() { } ``` -同样的，它也可以用在较大的表达式中， 虽然看起来不是太直观： +同样的，它也可以用在较大的表达式中，虽然看起来不是太直观： ```js{5,7,9} render() { From 7428e540f94443d78218b08806e9a984dc16b0ef Mon Sep 17 00:00:00 2001 From: MrPluto <457808167@qq.com> Date: Tue, 12 Feb 2019 16:21:39 +0800 Subject: [PATCH 04/10] typo --- content/docs/conditional-rendering.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 33135bdbac..ed330eb21c 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -158,10 +158,6 @@ ReactDOM.render( 在下面这个例子中，我们用它来条件渲染一小段文本 -另一种条件渲染的方法是使用 JavaScript 中的条件运算符 [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。 - -在下面这个例子中，我们用它来条件渲染一小段文本 - ```javascript{5} render() { const isLoggedIn = this.state.isLoggedIn; @@ -198,8 +194,6 @@ render() { 下面这个例子中，`` 根据属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将隐藏起来: -在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`。 - ```javascript{2-4,29} function WarningBanner(props) { if (!props.warn) { From ca819c6f6244c764fadb044af5b977116cb54cd7 Mon Sep 17 00:00:00 2001 From: MrPluto <457808167@qq.com> Date: Wed, 13 Feb 2019 12:02:38 +0800 Subject: [PATCH 05/10] improve --- content/docs/conditional-rendering.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index ed330eb21c..9efadf895f 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -44,7 +44,7 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -这个例子展示了如果根据 `isLoggedIn` 的值来渲染不同的问候语。 +这个例子展示了根据 `isLoggedIn` 的值来渲染不同的问候语。 ### 元素变量 @@ -120,7 +120,7 @@ ReactDOM.render( 声明一个变量并使用 `if` 语句是来做条件渲染的一个不错的方式，但有时你可能会想使用更简洁的语法。接下来，我们将介绍几中在 JSX 中做条件渲染的方法。 -### 与运算符 +### && 与运算符 通过花括号包裹代码，你可以 [在 JSX 中嵌入任何表达式](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。 这也包括 JavaScript 中的逻辑与 && 操作符。它可以很方便的来进行一个元素的条件渲染。 @@ -154,7 +154,7 @@ ReactDOM.render( ### 三目运算符 -另一种条件渲染的方法是使用 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)。 在下面这个例子中，我们用它来条件渲染一小段文本 From ba733dc2fd8a444435b561e89b1ed664841e21e8 Mon Sep 17 00:00:00 2001 From: MrPluto <457808167@qq.com> Date: Mon, 25 Feb 2019 11:04:15 +0800 Subject: [PATCH 06/10] improve --- content/docs/conditional-rendering.md | 30 +++++++++++++-------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 9efadf895f..369ccd3d29 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -10,7 +10,7 @@ redirect_from: 在 React 中，你可以创建一些明确的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。 -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。 来看看这两个组件: @@ -44,11 +44,11 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -这个例子展示了根据 `isLoggedIn` 的值来渲染不同的问候语。 +这个示例根据 `isLoggedIn` 的值来渲染不同的问候语。 ### 元素变量 -你可以使用变量来储存元素。 它可以帮组你有条件的渲染组件的一部分，而其他的渲染部分并不会因此而改变。 +你可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。 来看看这两个组件，它们分别代表了注销和登录按钮： @@ -70,9 +70,9 @@ function LogoutButton(props) { } ``` -在下面的例子中，我们将创建一个名叫 `LoginControl` 的 [有状态的组件](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) +在下面的示例中，我们将创建一个名叫 `LoginControl` 的 [有状态的组件](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) -它将根据当前的状态来渲染 `` 或者 ``。它也将渲染上一个例子中的 ``。 +它将根据当前的状态来渲染 `` 或者 ``。它也将渲染上一个示例中的 ``。 ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -118,11 +118,11 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -声明一个变量并使用 `if` 语句是来做条件渲染的一个不错的方式，但有时你可能会想使用更简洁的语法。接下来，我们将介绍几中在 JSX 中做条件渲染的方法。 +声明一个变量并使用 `if` 语句是条件渲染的一个不错的方式，但有时你可能会想使用更简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。 -### && 与运算符 +### 与运算符 && -通过花括号包裹代码，你可以 [在 JSX 中嵌入任何表达式](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。 这也包括 JavaScript 中的逻辑与 && 操作符。它可以很方便的来进行一个元素的条件渲染。 +通过花括号包裹代码，你可以 [在 JSX 中嵌入任何表达式](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行一个元素的条件渲染。 ```js{6-10} function Mailbox(props) { @@ -150,13 +150,13 @@ ReactDOM.render( 之所以能这样做，是因为在 JavaScript 中，`true && expression` 总是会返回 `expression`, 而 `false && expression` 总是会返回 `false`。 -因此，如果条件是 `true`，`&&` 右侧的元素就会被渲染，如果是 `false`，React 会忽略并跳过它 +因此，如果条件是 `true`，`&&` 右侧的元素就会被渲染，如果是 `false`，React 会忽略并跳过它。 ### 三目运算符 -另一种条件渲染的方法是使用 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{5} render() { @@ -186,13 +186,13 @@ render() { } ``` -就像在 JavaScript 中一样，你可以根据你们团队的习惯来选择更易读的代码风格。在这里提醒一下，如果条件变得过于复杂，那你应该考虑考虑[提取组件](/docs/components-and-props.html#extracting-components) 了。 +就像在 JavaScript 中一样，你可以根据你们团队的习惯来选择更易读的代码风格。在这里提醒一下，如果条件变得过于复杂，那你应该考虑考虑 [提取组件](/docs/components-and-props.html#extracting-components) 了。 ### 阻止组件渲染 -在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`。 +在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`，而不是其渲染结果。 -下面这个例子中，`` 根据属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将隐藏起来: +下面的示例中，`` 根据 prop 属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将不会渲染: ```javascript{2-4,29} function WarningBanner(props) { @@ -240,4 +240,4 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -在组件的 `render` 方法中返回 `null` 并不会影响组件的生命周期方法的回调。例如，上面这个例子中，`componentDidUpdate` 依然会被调用。 +在组件的 `render` 方法中返回 `null` 并不会影响组件的生命周期方法的回调。例如，上面这个示例中，`componentDidUpdate` 依然会被调用。 From 6f4f1f293324ca945732f4d3195b42e238367fa2 Mon Sep 17 00:00:00 2001 From: MrPluto <457808167@qq.com> Date: Mon, 25 Feb 2019 11:26:01 +0800 Subject: [PATCH 07/10] code pen --- content/docs/conditional-rendering.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 369ccd3d29..e5c4894dfa 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -42,7 +42,7 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) +[**在 CodePen 上尝试**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) 这个示例根据 `isLoggedIn` 的值来渲染不同的问候语。 @@ -116,7 +116,7 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) +[**在 CodePen 上尝试**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) 声明一个变量并使用 `if` 语句是条件渲染的一个不错的方式，但有时你可能会想使用更简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。 @@ -146,7 +146,7 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) +[**在 CodePen 上尝试**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) 之所以能这样做，是因为在 JavaScript 中，`true && expression` 总是会返回 `expression`, 而 `false && expression` 总是会返回 `false`。 @@ -238,6 +238,6 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) +[**在 CodePen 上尝试**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) 在组件的 `render` 方法中返回 `null` 并不会影响组件的生命周期方法的回调。例如，上面这个示例中，`componentDidUpdate` 依然会被调用。 From e52ca0abd8bffe1479f746d6be14d0957e9943ad Mon Sep 17 00:00:00 2001 From: MrPluto <457808167@qq.com> Date: Tue, 26 Feb 2019 18:51:39 +0800 Subject: [PATCH 08/10] more neutrally --- content/docs/conditional-rendering.md | 28 +++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index e5c4894dfa..448feeb44a 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,11 +8,11 @@ redirect_from: - "tips/false-in-jsx.html" --- -在 React 中，你可以创建一些明确的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。 +在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。 -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。 -来看看这两个组件: +观察这两个组件: ```js function UserGreeting(props) { @@ -24,7 +24,7 @@ function GuestGreeting(props) { } ``` -我们再创建一个 `Greeting` 组件，它会根据用户是否登录来决定显示上面的哪一个组件。 +再创建一个 `Greeting` 组件，它会根据用户是否登录来决定显示上面的哪一个组件。 ```javascript{3-7,11,12} function Greeting(props) { @@ -50,7 +50,7 @@ ReactDOM.render( 你可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。 -来看看这两个组件，它们分别代表了注销和登录按钮： +观察这两个组件，它们分别代表了注销和登录按钮： ```js function LoginButton(props) { @@ -70,9 +70,9 @@ function LogoutButton(props) { } ``` -在下面的示例中，我们将创建一个名叫 `LoginControl` 的 [有状态的组件](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) +在下面的示例中，我们将创建一个名叫 `LoginControl` 的[有状态的组件](/docs/state-and-lifecycle.html#adding-local-state-to-a-class)。 -它将根据当前的状态来渲染 `` 或者 ``。它也将渲染上一个示例中的 ``。 +它将根据当前的状态来渲染 `` 或者 ``。同时它还会渲染上一个示例中的 ``。 ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -118,11 +118,11 @@ ReactDOM.render( [**在 CodePen 上尝试**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -声明一个变量并使用 `if` 语句是条件渲染的一个不错的方式，但有时你可能会想使用更简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。 +声明一个变量并使用 `if` 语句进行条件渲染是不错的方式，但有时你可能会想使用更为简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。 ### 与运算符 && -通过花括号包裹代码，你可以 [在 JSX 中嵌入任何表达式](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行一个元素的条件渲染。 +通过花括号包裹代码，你可以[在 JSX 中嵌入任何表达式](/docs/introducing-jsx.html#embedding-expressions-in-jsx)。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。 ```js{6-10} function Mailbox(props) { @@ -169,7 +169,7 @@ render() { } ``` -同样的，它也可以用在较大的表达式中，虽然看起来不是太直观： +同样的，它也可以用于较为复杂的表达式中，虽然看起来不是很直观： ```js{5,7,9} render() { @@ -186,13 +186,13 @@ render() { } ``` -就像在 JavaScript 中一样，你可以根据你们团队的习惯来选择更易读的代码风格。在这里提醒一下，如果条件变得过于复杂，那你应该考虑考虑 [提取组件](/docs/components-and-props.html#extracting-components) 了。 +就像在 JavaScript 中一样，你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是，如果条件变得过于复杂，那你应该考虑如何 [提取组件](/docs/components-and-props.html#extracting-components) 了。 ### 阻止组件渲染 -在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染了。为了达到这个目的，你可以让 `render` 方法返回 `null`，而不是其渲染结果。 +在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 `render` 方法直接返回 `null`，而不进行任何渲染。 -下面的示例中，`` 根据 prop 属性 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件将不会渲染: +下面的示例中，`` 会根据 prop 中 `warn` 的值来进行条件渲染。如果 `warn` 的值是 `false`，那么组件则不会渲染: ```javascript{2-4,29} function WarningBanner(props) { @@ -240,4 +240,4 @@ ReactDOM.render( [**在 CodePen 上尝试**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -在组件的 `render` 方法中返回 `null` 并不会影响组件的生命周期方法的回调。例如，上面这个示例中，`componentDidUpdate` 依然会被调用。 +在组件的 `render` 方法中返回 `null` 并不会影响组件的生命周期。例如，上面这个示例中，`componentDidUpdate` 依然会被调用。 From 6d44321e31eff6f28af56fc7104a1c100999f581 Mon Sep 17 00:00:00 2001 From: Joe Jiang Date: Tue, 26 Feb 2019 22:43:26 +0800 Subject: [PATCH 09/10] Update conditional-rendering.md --- content/docs/conditional-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 448feeb44a..f9d45910df 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -10,7 +10,7 @@ redirect_from: 在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。 -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。 观察这两个组件: @@ -186,7 +186,7 @@ render() { } ``` -就像在 JavaScript 中一样，你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是，如果条件变得过于复杂，那你应该考虑如何 [提取组件](/docs/components-and-props.html#extracting-components) 了。 +就像在 JavaScript 中一样，你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是，如果条件变得过于复杂，那你应该考虑如何[提取组件](/docs/components-and-props.html#extracting-components)了。 ### 阻止组件渲染 From c9ae1151393dcbb9307f1d7f6b6853ab13e44b95 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Wed, 27 Feb 2019 09:53:15 +0800 Subject: [PATCH 10/10] Update conditional-rendering.md --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index f9d45910df..aee53146ed 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -186,7 +186,7 @@ render() { } ``` -就像在 JavaScript 中一样，你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是，如果条件变得过于复杂，那你应该考虑如何[提取组件](/docs/components-and-props.html#extracting-components)了。 +就像在 JavaScript 中一样，你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是，如果条件变得过于复杂，那你应该考虑如何[提取组件](/docs/components-and-props.html#extracting-components)。 ### 阻止组件渲染