Skip to content

Commit f80fa85

Browse files
Adding Jakub's corrections
1 parent 1dd5374 commit f80fa85

File tree

1 file changed

+21
-22
lines changed

1 file changed

+21
-22
lines changed

content/docs/conditional-rendering.md

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ redirect_from:
88
- "tips/false-in-jsx.html"
99
---
1010

11-
React umożliwia tworzenie odrębnych komponentów, które hermetyzują (ang. *encapsulate*) pożądane przez ciebie metody. Następnie zrenderowane mogą być wybrane komponenty, w zależności od stanu twojej aplikacji.
11+
React umożliwia tworzenie odrębnych komponentów, które hermetyzują (ang. *encapsulate*) pożądane przez ciebie metody. Wybrane komponenty mogą być renderowane bądź nie, w zależności od stanu twojej aplikacji.
1212

13-
Renderowanie warunkowe działa w Reakcie tak samo jak warunki JavaScriptowe. Aby stworzyć elementy odzwierciedlające aktualny stan aplikacji, należy użyć operatora takiego jak [if](https://developer.mozilla.org/pl/docs/Learn/Getting_started_with_the_web/JavaScript_basics#Warunki) lub [operatora warunkowego](https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_warunkowy) oraz pozwolić Reactowi je dopasować poprzez aktualizację interfejsu użytkownika.
13+
Renderowanie warunkowe działa w Reakcie tak samo, jak instrukcje warunkowe w javascripcie. Aby stworzyć elementy odzwierciedlające aktualny stan aplikacji, należy użyć instrukcji [if](https://developer.mozilla.org/pl/docs/Learn/Getting_started_with_the_web/JavaScript_basics#Warunki) lub [operatora warunkowego](https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_warunkowy) oraz pozwolić Reactowi je dopasować poprzez aktualizację interfejsu użytkownika.
1414

1515
Rozważmy następujące dwa komponenty:
1616

@@ -20,11 +20,11 @@ function UserGreeting(props) {
2020
}
2121

2222
function GuestGreeting(props) {
23-
return <h1>Proszę się zapisać.</h1>;
23+
return <h1>Proszę się zarejestrować.</h1>;
2424
}
2525
```
2626

27-
Stworzymy komponent `Greeting` (ang. *Powitanie*), który wyświetlał będzie jeden lub drugi z powyższych komponentów w zależności od tego czy użytkownik jest zalogowany.
27+
Stworzymy komponent `Greeting` (pol. *Powitanie*), który wyświetlał będzie pierwszy lub drugi z powyższych komponentów w zależności od tego czy użytkownik jest zalogowany.
2828

2929
```javascript{3-7,11,12}
3030
function Greeting(props) {
@@ -36,21 +36,21 @@ function Greeting(props) {
3636
}
3737
3838
ReactDOM.render(
39-
// Try changing to isLoggedIn={true}:
39+
// Spróbuj zmienić na isLoggedIn={true}:
4040
<Greeting isLoggedIn={false} />,
4141
document.getElementById('root')
4242
);
4343
```
4444

4545
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
4646

47-
Powitanie renderowane przez kod w powyższym przykładzie zależy of wartości właściwości `isLoggedIn`.
47+
Powitanie renderowane przez kod w powyższym przykładzie zależy od wartości właściwości `isLoggedIn`.
4848

4949
### Zmienne elementowe {#element-variables}
5050

51-
Elementy mogą być przechowywane w zmiennych. Pozwala to na warunkowe renderowanie określonej części, komponentu podczas gdy pozostałe dane wyjściowe nie ulegają zmianie.
51+
Elementy mogą być przechowywane w zmiennych. Pozwala to na warunkowe renderowanie określonej części komponentu, podczas gdy pozostałe dane wyjściowe nie ulegają zmianie.
5252

53-
Przyjrzyjmy się dwóm nowym komponentom tworzącym przyciski logowania Zaloguj się (ang. *Login*) oraz Wyloguj się (ang. *Logout*):
53+
Przyjrzyjmy się dwóm nowym komponentom tworzącym przyciski logowania "Zaloguj się" (ang. *Login*) oraz "Wyloguj się" (ang. *Logout*):
5454

5555
```js
5656
function LoginButton(props) {
@@ -72,7 +72,7 @@ function LogoutButton(props) {
7272

7373
W przykładzie poniżej zbudujemy [komponent ze stanem](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) o nazwie `LoginControl` (pol. *kontrola logowania*)
7474

75-
W zależności od aktualnego stanu będzie on renderował przycisk logowania (`<LoginButton />`) lub wylogowania `<LogoutButton />` . Będzie on również renderował komponent `<Greeting />` z poprzedniego przykładu:
75+
W zależności od aktualnego stanu, będzie on renderował przycisk logowania (`<LoginButton />`) lub wylogowania `<LogoutButton />` . Będzie on również renderował komponent `<Greeting />` z poprzedniego przykładu:
7676

7777

7878
```javascript{20-25,29,30}
@@ -119,12 +119,12 @@ ReactDOM.render(
119119

120120
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
121121

122-
Deklarowanie zmiennej oraz stosowanie warunku `if` to dobry sposób na warunkowe renderowanie komponentu. Czasem jednak przydaje się nieco krótsza składnia. JSX umożliwia kilka różnych opcji warunków wewnątrz liniowych. Przedstawiamy je poniżej.
122+
Deklarowanie zmiennej oraz stosowanie instrukcji `if` to dobry sposób na warunkowe renderowanie komponentu. Czasem jednak przydaje się nieco krótsza składnia. JSX umożliwia kilka różnych opcji warunków wewnątrzliniowych. Przedstawiamy je poniżej.
123123

124124

125-
### Wewnątrz liniowy warunek `if` z użyciem logicznego operatora `&&` {#inline-if-with-logical--operator}
125+
### Wewnątrzliniowy warunek `if` z użyciem logicznego operatora `&&` {#inline-if-with-logical--operator}
126126

127-
JSX umożliwia stosowanie w nawiasach klamrowych [wszelkich wyrażeń](/docs/introducing-jsx.html#embedding-expressions-in-jsx), łącznie z JavaScriptowym operatorem logicznym `&&`. Jest to przydatne do warunkowego załączania elementu.
127+
JSX umożliwia stosowanie w nawiasach klamrowych [wszelkich wyrażeń](/docs/introducing-jsx.html#embedding-expressions-in-jsx), łącznie z javascriptowym operatorem logicznym `&&`. Jest to przydatne, gdy chcemy jakiś element dołączyć warunkowo.
128128

129129
```js{6-10}
130130
function Mailbox(props) {
@@ -150,15 +150,15 @@ ReactDOM.render(
150150

151151
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
152152

153-
Powyższy kod działa ponieważ w JavaScripcie `true && wyrażenie` zawsze jest ewaluowane jako `wyrażenie`, natomiast `false && wyrażenie` jako `false`.
153+
Powyższy kod działa, ponieważ w JavaScripcie `true && *wyrażenie*` zawsze jest ewaluowane jako `wyrażenie`, natomiast `false && wyrażenie` jako `false`.
154154

155-
Zatem jeśli warunek jest `true`, element następujący bezpośrednio po `&&` zostanie ukazany w danych wyjściowych. Natomiast jeśli warunek jest `fałszywy`, React zignoruje go i pominie przy renderowaniu.
155+
Zatem jeśli warunek zwraca `true`, element następujący bezpośrednio po operatorze `&&` zostanie uwzględniony w danych wyjściowych. Natomiast jeśli warunek zwróci `false`, React zignoruje go i pominie przy renderowaniu.
156156

157-
### Warunek if-else z operatorem warunkowym {#inline-if-else-with-conditional-operator}
157+
### Skrócona forma `if-else` z operatorem warunkowym {#inline-if-else-with-conditional-operator}
158158

159-
Kolejną metodą renderowania warunkowego wewnątrz liniowego jest stosowanie JavaScriptowego operatora warunkowego [`warunek ? true : false`](https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_warunkowy).
159+
Kolejną metodą renderowania warunkowego wewnątrz wyrażenia jest stosowanie javascriptowego operatora warunkowego [`warunek ? true : false`](https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_warunkowy).
160160

161-
W przykładzie poniżej używamy go, aby warunkowo zrenderować mały blok tekstu.
161+
W przykładzie poniżej używamy go, aby warunkowo wyrenderować niewielki blok tekstu.
162162

163163
```javascript{5}
164164
render() {
@@ -187,15 +187,14 @@ render() {
187187
);
188188
}
189189
```
190-
Czytelność takich wyrażeń jest oczywiście nieco mniejsza. Podobnie jak w JavaScripcie, wybór odpowiedniego stylu zależy od preferencji twoich i twojego zespołu. Jednocześnie należy pamiętać, że kiedy warunki stają się nazbyt złożone, dobrze jest roważyć możliwość [stworzenia osobnego komponentu](/docs/components-and-props.html#extracting-components)
191-
190+
Czytelność takich wyrażeń jest oczywiście nieco mniejsza. Podobnie jak w JavaScripcie, wybór odpowiedniego stylu zależy od preferencji twoich i twojego zespołu. Jednocześnie należy pamiętać, że kiedy warunki stają się nazbyt złożone, dobrze jest rozważyć możliwość [wydzielenia osobnego komponentu](/docs/components-and-props.html#extracting-components)
192191

193192
### Zapobieganie renderowaniu komponentu {#preventing-component-from-rendering}
194193

195-
W sporadycznych przypadkach, może zachodzić potrzeba ukrycia się komponentu mimo, iż został on zrenderowany przez inny komponent. Aby to umożliwić należy zastosować wartość `null` zamiast jego renderowanych danych wyjściowych.
194+
W sporadycznych przypadkach może zachodzić potrzeba ukrycia się komponentu, mimo iż został on już wyrenderowany przez inny komponent. Aby to umożliwić, należy zwrócić zamiast niego wartość `null`.
196195

197196

198-
W przykładzie poniżej, renderowanie baneru ostrzegawczego `<WarningBanner />` jest uzależnione od wartości właściwości o nazwie `warn` (ang. *ostrzeż*). Jeśli wartość tej właściwości jest `false`, wówczas komponent ten nie jest renderowany.
197+
W przykładzie poniżej, renderowanie baneru ostrzegawczego `<WarningBanner />` jest uzależnione od wartości właściwości o nazwie `warn` (pol. *ostrzeż*). Jeśli jest ona równa `false`, wówczas komponent ten nie jest renderowany.
199198

200199

201200
```javascript{2-4,29}
@@ -244,4 +243,4 @@ ReactDOM.render(
244243

245244
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
246245

247-
Zwrócenie wartości `null` z metody `render` danego komponentu nie ma wpływu na wywoływanie metod cyklu życia tego komponentu. To znaczy, że np. metoda `componentDidUpdate` w dalszym ciągu zostanie wywołana.
246+
Zwrócenie wartości `null` w metodzie `render` danego komponentu nie ma wpływu na wywoływanie metod cyklu życia tego komponentu. To znaczy, że np. metoda `componentDidUpdate` w dalszym ciągu zostanie wywołana.

0 commit comments

Comments
 (0)