From e0ed28a4f55de6ed3a251940046dfa6885b1f4d5 Mon Sep 17 00:00:00 2001 From: Igor Soloydenko Date: Sun, 10 Feb 2019 00:53:12 -0800 Subject: [PATCH 1/3] Translate "Conditional Rendering" into Russian --- content/docs/conditional-rendering.md | 78 +++++++++++++-------------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 7df19bb98..5f0dd65b5 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -1,6 +1,6 @@ --- id: conditional-rendering -title: Conditional Rendering +title: Условный рендеринг permalink: docs/conditional-rendering.html prev: handling-events.html next: lists-and-keys.html @@ -8,23 +8,23 @@ 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. Чтобы создать элементы отражающие текущее состояние и позволить React обновить UI в соответствии с ними, используйте [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80) JavaScript или выражения подобные [`if`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...else). -Consider these two components: +Рассмотрим два компонента: ```js function UserGreeting(props) { - return

Welcome back!

; + return

С возвращением!

; } function GuestGreeting(props) { - return

Please sign up.

; + return

Залогиньтесь, пожалуйста.

; } ``` -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) { @@ -36,27 +36,27 @@ function Greeting(props) { } ReactDOM.render( - // Try changing to isLoggedIn={true}: + // Попробуйте заменить на isLoggedIn={true} и посмотрите на эффект. , document.getElementById('root') ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) +[**Посмотреть на 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 {#element-variables} +### Переменные-элементы {#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. +Элементы React можно сохранять в переменных. Это может быть удобно, когда какое-то условие определяет, надо ли рендерить одну часть компонента или нет, тогда как другая часть компонента остаётся неизменной. -Consider these two new components representing Logout and Login buttons: +Рассмотрим ещё два компонента, представляющих кнопки Залогиниться (Login) и Выйти (Logout). ```js function LoginButton(props) { return ( ); } @@ -64,15 +64,15 @@ function LoginButton(props) { function LogoutButton(props) { return ( ); } ``` -In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`. +В следующем примере мы создадим [компонент с состоянием](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) и назовём его `LoginControl`. -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 { @@ -116,23 +116,23 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) +[**Посмотреть на 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 {#inline-if-with-logical--operator} +### Условное (if) встраивание с помощью логического оператора && {#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) { const unreadMessages = props.unreadMessages; return (
-

Hello!

+

Здравствуйте!

{unreadMessages.length > 0 &&

- You have {unreadMessages.length} unread messages. + У вас {unreadMessages.length} непрочитанных сообщений.

}
@@ -146,30 +146,30 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) +[**Посмотреть на 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`. +Приведённый выше вариант работает корректно, потому что в JavaScript, выражение `true && expression` всегда вычисляется как `expression`, а выражение `false && expression` — как `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. +То есть, если условие истинно (`true`), то элемент, идущий непосредственно за `&&` будет передан на вывод. Если же оно ложно (`false`), то React проигнорирует и пропустит его. -### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator} +### Условное (if-else) встраивание с помощью тернарного оператора {#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). +Есть ещё один метод встраивания условного рендеринга элементов. В нём используется тернарный условный оператор JavaScript [`condition ? true : false`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80). -In the example below, we use it to conditionally render a small block of text. +Вот как этот метод можно использовать, чтобы отрендерить кусочек текста. ```javascript{5} render() { const isLoggedIn = this.state.isLoggedIn; return (
- The user is {isLoggedIn ? 'currently' : 'not'} logged in. + Пользователь {isLoggedIn ? 'сейчас' : 'не'} залогинен.
); } ``` -It can also be used for larger expressions although it is less obvious what's going on: +Этот метод можно использовать и с выражениями покрупнее, но это может сделать код менее очевидным: ```js{5,7,9} render() { @@ -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, так и в React выбор уместного стиля — личное дело вас или вашей команды, в котором важны взгляды на то, какой стиль читается лучше. Не забывайте, что если какое-то условие выглядят очень сложным, возможно пришло время [извлечь часть кода в отдельный компонент](/docs/components-and-props.html#extracting-components). -### Preventing Component from Rendering {#preventing-component-from-rendering} +### Предотвращение рендеринга компонента {#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. +В редких случаях может потребоваться позволить компоненту спрятать себя, хотя он уже и отрендерен другим компонентом. Чтобы этого добиться, просто верните `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`. Если значение `false`, компонент ничего не рендерит: ```javascript{2-4,29} function WarningBanner(props) { @@ -202,7 +202,7 @@ function WarningBanner(props) { return (
- Warning! + Предупреждение!
); } @@ -225,7 +225,7 @@ class Page extends React.Component {
); @@ -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) -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. +Сам факт возврата `null` из метода `render` компонента никак не влияет на срабатывание методов жизненного цикла компонента. Например, `componentDidUpdate` будет всё равно вызван. From bb2fdde6caed827162c77a1ab524d9d502da9b74 Mon Sep 17 00:00:00 2001 From: Igor Soloydenko Date: Sun, 10 Feb 2019 12:07:22 -0800 Subject: [PATCH 2/3] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20PR-=D0=B7=D0=B0=D0=BC=D0=B5=D1=87=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F=20=D0=BF=D1=80=D0=BE=20conditional-rendering.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/conditional-rendering.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 5f0dd65b5..266761549 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,9 +8,9 @@ redirect_from: - "tips/false-in-jsx.html" --- -С React можно создать разные компоненты, инкапсулирующие поведение. Затем вы можете решить рендерить только некоторые из них по своему усмотрению в зависимости от состояния приложения. +React позволяет разделить логику на независимые компоненты. Эти компоненты можно показывать или прятать в зависимости от текущего состояния. -Условный рендеринг в React работает так же, как условные выражения работают в JavaScript. Чтобы создать элементы отражающие текущее состояние и позволить React обновить UI в соответствии с ними, используйте [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80) JavaScript или выражения подобные [`if`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...else). +Условный рендеринг в React работает так же, как условные выражения работают в JavaScript. Бывает нужно объяснить React, как состояние влияет на то, какие компоненты требуется скрыть, а какие — отрендерить, и как именно. В таких ситуациях используйте [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80) JavaScript или выражения подобные [`if`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...else), . Рассмотрим два компонента: @@ -20,11 +20,11 @@ function UserGreeting(props) { } function GuestGreeting(props) { - return

Залогиньтесь, пожалуйста.

; + return

Войдите, пожалуйста.

; } ``` -Можно создать компонент `Greeting`, который отражает один из вышеуказанных компонентов в зависимости от того, залогинен пользователь или нет: +Можно создать компонент `Greeting`, который отражает один из этих компонентов в зависимости от того, на сайте пользователь или нет: ```javascript{3-7,11,12} function Greeting(props) { @@ -44,19 +44,19 @@ ReactDOM.render( [**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -В этом примере рендерится различное приветствие в зависимости от значания пропа `isLoggedIn`. +В этом примере рендерится различное приветствие в зависимости от значения пропа `isLoggedIn`. ### Переменные-элементы {#element-variables} -Элементы React можно сохранять в переменных. Это может быть удобно, когда какое-то условие определяет, надо ли рендерить одну часть компонента или нет, тогда как другая часть компонента остаётся неизменной. +Элементы React можно сохранять в переменных. Это может быть удобно, когда какое-то условие определяет, надо ли рендерить одну часть компонента или нет, а другая часть компонента остаётся неизменной. -Рассмотрим ещё два компонента, представляющих кнопки Залогиниться (Login) и Выйти (Logout). +Рассмотрим ещё два компонента, представляющих кнопки Войти (Login) и Выйти (Logout). ```js function LoginButton(props) { return ( ); } @@ -72,7 +72,7 @@ function LogoutButton(props) { В следующем примере мы создадим [компонент с состоянием](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) и назовём его `LoginControl`. -Он будет рендерить либо ``, либо ``, в зависимости от текущего состояния. А также он будет всегда рендерить `` из предыдущего примера. +Он будет рендерить либо ``, либо ``, в зависимости от текущего состояния. А ещё он будет всегда рендерить `` из предыдущего примера. ```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. ### Условное (if) встраивание с помощью логического оператора && {#inline-if-with-logical--operator} -Вы можете [внедрить любое выражение в 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) { @@ -163,7 +163,7 @@ render() { const isLoggedIn = this.state.isLoggedIn; return (
- Пользователь {isLoggedIn ? 'сейчас' : 'не'} залогинен. + Пользователь {isLoggedIn ? 'сейчас' : 'не'} на сайте.
); } @@ -190,7 +190,7 @@ render() { ### Предотвращение рендеринга компонента {#preventing-component-from-rendering} -В редких случаях может потребоваться позволить компоненту спрятать себя, хотя он уже и отрендерен другим компонентом. Чтобы этого добиться, просто верните `null` вместо того, что обычно возвращается на рендеринг. +В редких случаях может потребоваться позволить компоненту спрятать себя, хотя он уже и отрендерен другим компонентом. Чтобы этого добиться, верните `null` вместо того, что обычно возвращается на рендеринг. Например, будет ли содержимое `` отрендерено, зависит от значения пропа под именем `warn`. Если значение `false`, компонент ничего не рендерит: From 3bcdbafebbcedec40c8cd31c3ca7b743ec39f792 Mon Sep 17 00:00:00 2001 From: Igor Soloydenko Date: Sun, 10 Feb 2019 22:34:36 -0800 Subject: [PATCH 3/3] =?UTF-8?q?=D0=91=D0=BE=D0=BB=D1=8C=D1=88=D0=B5=20?= =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B9=20=D0=BF=D0=BE=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=87=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D1=8F=D0=BC=20=D0=BA=D0=B0=D1=81=D0=B0=D1=82=D0=B5?= =?UTF-8?q?=D0=BB=D1=8C=D0=BD=D0=BE=20conditional-rendering?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/conditional-rendering.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 266761549..d9b1f4a0f 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -10,7 +10,7 @@ redirect_from: React позволяет разделить логику на независимые компоненты. Эти компоненты можно показывать или прятать в зависимости от текущего состояния. -Условный рендеринг в React работает так же, как условные выражения работают в JavaScript. Бывает нужно объяснить React, как состояние влияет на то, какие компоненты требуется скрыть, а какие — отрендерить, и как именно. В таких ситуациях используйте [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80) JavaScript или выражения подобные [`if`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...else), . +Условный рендеринг в React работает так же, как условные выражения работают в JavaScript. Бывает нужно объяснить React, как состояние влияет на то, какие компоненты требуется скрыть, а какие — отрендерить, и как именно. В таких ситуациях используйте [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80) JavaScript или выражения подобные [`if`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...else). Рассмотрим два компонента: @@ -72,7 +72,7 @@ function LogoutButton(props) { В следующем примере мы создадим [компонент с состоянием](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) и назовём его `LoginControl`. -Он будет рендерить либо ``, либо ``, в зависимости от текущего состояния. А ещё он будет всегда рендерить `` из предыдущего примера. +Он будет рендерить либо ``, либо `` в зависимости от текущего состояния. А ещё он будет всегда рендерить `` из предыдущего примера. ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -120,9 +120,9 @@ ReactDOM.render( Нет ничего плохого в том, чтобы объявить переменную и условно рендерить компонент `if`-выражением. Но иногда хочется синтаксис покороче. Давайте посмотрим на несколько других способов писать условия прямо в JSX. -### Условное (if) встраивание с помощью логического оператора && {#inline-if-with-logical--operator} +### Встроенные условия if с логическим оператором && {#inline-if-with-logical--operator} -Вы можете [внедрить любое выражение в 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) { @@ -148,11 +148,11 @@ ReactDOM.render( [**Посмотреть на 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 проигнорирует и пропустит его. +То есть, если условие истинно (`true`), то элемент, идущий непосредственно за `&&`, будет передан на вывод. Если же оно ложно (`false`), то React проигнорирует и пропустит его. -### Условное (if-else) встраивание с помощью тернарного оператора {#inline-if-else-with-conditional-operator} +### Встроенные условия if-else с тернарным оператором {#inline-if-else-with-conditional-operator} Есть ещё один метод встраивания условного рендеринга элементов. В нём используется тернарный условный оператор JavaScript [`condition ? true : false`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80).