Skip to content

Commit 2e78ba6

Browse files
committed
Больше исправлений по замечаниям касательно conditional-rendering
1 parent 339c949 commit 2e78ba6

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

content/docs/conditional-rendering.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ redirect_from:
1010

1111
React позволяет разделить логику на независимые компоненты. Эти компоненты можно показывать или прятать в зависимости от текущего состояния.
1212

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).
1414

1515
Рассмотрим два компонента:
1616

@@ -72,7 +72,7 @@ function LogoutButton(props) {
7272

7373
В следующем примере мы создадим [компонент с состоянием](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) и назовём его `LoginControl`.
7474

75-
Он будет рендерить либо `<LoginButton />`, либо `<LogoutButton />`, в зависимости от текущего состояния. А ещё он будет всегда рендерить `<Greeting />` из предыдущего примера.
75+
Он будет рендерить либо `<LoginButton />`, либо `<LogoutButton />` в зависимости от текущего состояния. А ещё он будет всегда рендерить `<Greeting />` из предыдущего примера.
7676

7777
```javascript{20-25,29,30}
7878
class LoginControl extends React.Component {
@@ -120,9 +120,9 @@ ReactDOM.render(
120120

121121
Нет ничего плохого в том, чтобы объявить переменную и условно рендерить компонент `if`-выражением. Но иногда хочется синтаксис покороче. Давайте посмотрим на несколько других способов писать условия прямо в JSX.
122122

123-
### Условное (if) встраивание с помощью логического оператора && {#inline-if-with-logical--operator}
123+
### Встроенные условия if с логическим оператором && {#inline-if-with-logical--operator}
124124

125-
Вы можете [внедрить любое выражение в JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx), просто заключив его в фигурные скобки. Это правило распространяется и на логический оператор `&&` языка JavaScript, которым можно удобно вставить элемент в зависимости от условния:
125+
Вы можете [внедрить любое выражение в JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx), заключив его в фигурные скобки. Это правило распространяется и на логический оператор `&&` языка JavaScript, которым можно удобно вставить элемент в зависимости от условия:
126126

127127
```js{6-10}
128128
function Mailbox(props) {
@@ -148,11 +148,11 @@ ReactDOM.render(
148148

149149
[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
150150

151-
Приведённый выше вариант работает корректно, потому что в JavaScript, выражение `true && expression` всегда вычисляется как `expression`, а выражение `false && expression` — как `false`.
151+
Приведённый выше вариант работает корректно, потому что в JavaScript выражение `true && expression` всегда вычисляется как `expression`, а выражение `false && expression` — как `false`.
152152

153-
То есть, если условие истинно (`true`), то элемент, идущий непосредственно за `&&` будет передан на вывод. Если же оно ложно (`false`), то React проигнорирует и пропустит его.
153+
То есть, если условие истинно (`true`), то элемент, идущий непосредственно за `&&`, будет передан на вывод. Если же оно ложно (`false`), то React проигнорирует и пропустит его.
154154

155-
### Условное (if-else) встраивание с помощью тернарного оператора {#inline-if-else-with-conditional-operator}
155+
### Встроенные условия if-else с тернарным оператором {#inline-if-else-with-conditional-operator}
156156

157157
Есть ещё один метод встраивания условного рендеринга элементов. В нём используется тернарный условный оператор 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).
158158

0 commit comments

Comments
 (0)