You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/conditional-rendering.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ redirect_from:
10
10
11
11
React позволяет разделить логику на независимые компоненты. Эти компоненты можно показывать или прятать в зависимости от текущего состояния.
12
12
13
-
Условный рендеринг в 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), .
13
+
Условный рендеринг в 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).
14
14
15
15
Рассмотрим два компонента:
16
16
@@ -72,7 +72,7 @@ function LogoutButton(props) {
72
72
73
73
В следующем примере мы создадим [компонент с состоянием](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) и назовём его `LoginControl`.
74
74
75
-
Он будет рендерить либо `<LoginButton />`, либо `<LogoutButton />`, в зависимости от текущего состояния. А ещё он будет всегда рендерить `<Greeting />` из предыдущего примера.
75
+
Он будет рендерить либо `<LoginButton />`, либо `<LogoutButton />` в зависимости от текущего состояния. А ещё он будет всегда рендерить `<Greeting />` из предыдущего примера.
76
76
77
77
```javascript{20-25,29,30}
78
78
class LoginControl extends React.Component {
@@ -120,9 +120,9 @@ ReactDOM.render(
120
120
121
121
Нет ничего плохого в том, чтобы объявить переменную и условно рендерить компонент `if`-выражением. Но иногда хочется синтаксис покороче. Давайте посмотрим на несколько других способов писать условия прямо в JSX.
122
122
123
-
### Условное (if) встраивание с помощью логического оператора && {#inline-if-with-logical--operator}
123
+
### Встроенные условия if с логическим оператором && {#inline-if-with-logical--operator}
124
124
125
-
Вы можете [внедрить любое выражение в JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx), просто заключив его в фигурные скобки. Это правило распространяется и на логический оператор `&&` языка JavaScript, которым можно удобно вставить элемент в зависимости от условния:
125
+
Вы можете [внедрить любое выражение в JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx), заключив его в фигурные скобки. Это правило распространяется и на логический оператор `&&` языка JavaScript, которым можно удобно вставить элемент в зависимости от условия:
126
126
127
127
```js{6-10}
128
128
function Mailbox(props) {
@@ -148,11 +148,11 @@ ReactDOM.render(
148
148
149
149
[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
150
150
151
-
Приведённый выше вариант работает корректно, потому что в JavaScript, выражение `true && expression` всегда вычисляется как `expression`, а выражение `false && expression` — как `false`.
151
+
Приведённый выше вариант работает корректно, потому что в JavaScript выражение `true && expression` всегда вычисляется как `expression`, а выражение `false && expression` — как `false`.
152
152
153
-
То есть, если условие истинно (`true`), то элемент, идущий непосредственно за `&&` будет передан на вывод. Если же оно ложно (`false`), то React проигнорирует и пропустит его.
153
+
То есть, если условие истинно (`true`), то элемент, идущий непосредственно за `&&`, будет передан на вывод. Если же оно ложно (`false`), то React проигнорирует и пропустит его.
154
154
155
-
### Условное (if-else) встраивание с помощью тернарного оператора {#inline-if-else-with-conditional-operator}
155
+
### Встроенные условия if-else с тернарным оператором {#inline-if-else-with-conditional-operator}
156
156
157
157
Есть ещё один метод встраивания условного рендеринга элементов. В нём используется тернарный условный оператор 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).
0 commit comments