Russian translation if-else in JSX of tips (#7726)
Ivan Zotov committed
Sep 14, 2016 at 15:05 UTC
79367b09f76fcd12d537dada51c44d01301dbab5
1 file changed
+81
docs/tips/03-if-else-in-JSX.ru-RU.md
new
+81
@@ -0,0 +1,81 @@
1
+---
2
+id: if-else-in-JSX
3
+title: If-Else в JSX
4
+layout: tips
5
+permalink: tips/if-else-in-JSX-ru-RU.html
6
+prev: inline-styles-ru-RU.html
7
+next: self-closing-tag.html
8
+---
9
+
10
+Некоторые конструкции, такие как `if-else`, нельзя использовать внутри JSX, так как JSX в результате преобразуется в вызов функции JS, как показано в примере:
11
+
12
+```js
13
+// JSX:
14
+ReactDOM.render(<div id="msg">Hello World!</div>, mountNode);
15
+
16
+// Преобразованный в JS:
17
+ReactDOM.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);
18
+```
19
+
20
+Это означает что оператор `if` нельзя встроить таким образом:
21
+
22
+```js
23
+// JSX:
24
+<div id={if (condition) { 'msg' }}>Hello World!</div>
25
+
26
+// Преобразованный в JS:
27
+React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
28
+```
29
+
30
+В результате преобразования получается неверный JS код. В таких случаях используется тернарный условный оператор:
31
+
32
+```js
33
+ReactDOM.render(<div id={condition ? 'msg' : null}>Hello World!</div>, mountNode);
34
+```
35
+
36
+Если тернарного оператора недостаточно, вы можете вынести оператор `if`, определяющий выбор компонентов, вне JSX:
37
+
38
+```js
39
+var loginButton;
40
+if (loggedIn) {
41
+ loginButton = <LogoutButton />;
42
+} else {
43
+ loginButton = <LoginButton />;
44
+}
45
+
46
+return (
47
+ <nav>
48
+ <Home />
49
+ {loginButton}
50
+ </nav>
51
+);
52
+```
53
+
54
+Также вы можете обернуть код в [немедленно вызываемую функцию](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) и расположить её _внутри_ JSX.
55
+
56
+```js
57
+return (
58
+ <section>
59
+ <h1>Color</h1>
60
+ <h3>Name</h3>
61
+ <p>{this.state.color || "white"}</p>
62
+ <h3>Hex</h3>
63
+ <p>
64
+ {(() => {
65
+ switch (this.state.color) {
66
+ case "red": return "#FF0000";
67
+ case "green": return "#00FF00";
68
+ case "blue": return "#0000FF";
69
+ default: return "#FFFFFF";
70
+ }
71
+ })()}
72
+ </p>
73
+ </section>
74
+);
75
+```
76
+
77
+> Примечание:
78
+>
79
+> В приведенном выше примере, используется [функция-стрелка](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) из ES6 для связи со значением `this`.
80
+
81
+Вы можете попробовать этот синтаксис внутри [Babel REPL](https://babeljs.io/repl/).