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/reference-react-dom.md
+36-28Lines changed: 36 additions & 28 deletions
Original file line number
Diff line number
Diff line change
@@ -6,53 +6,59 @@ category: Reference
6
6
permalink: docs/react-dom.html
7
7
---
8
8
9
-
Jeśli załadujesz React ze znacznika `<script>`, te interfejsy API najwyższego poziomu są dostępne w globalnym katalogu`ReactDOM`. Jeśli używasz ES6 z npm, możesz napisać`import ReactDOM from 'react-dom'`. Jeśli używasz ES5 z npm, możesz napisać `var ReactDOM = require ('react-dom')`.
9
+
Jeśli załadujesz Reacta za pomocą znacznika `<script>`, wspomniane w tym rozdziale główne interfejsy API będą dostępne poprzez globalną zmienną`ReactDOM`. Jeśli używasz ES6 z npm, wczytaj je za pomocą`import ReactDOM from 'react-dom'`. Jeśli używasz ES5 z npm, możesz napisać `var ReactDOM = require ('react-dom')`.
10
10
11
-
## Przegląd {#overview}
11
+
## Informacje ogólne {#overview}
12
12
13
-
Pakiet "react-dom" udostępnia metody specyficzne dla DOM, które mogą być używane na najwyższym poziomie aplikacji i jako kreska ewakuacyjna, aby wyjść poza model React, jeśli zajdzie taka potrzeba. Większość komponentów nie musi używać tego modułu.
13
+
Pakiet "react-dom" udostępnia metody specyficzne dla DOM, które mogą być używane na najwyższym poziomie aplikacji i, w razie potrzeby, jako "wyjście awaryjne" poza model Reacta. Jednak w przypadku większości komponentów użycie tej biblioteki nie będzie konieczne.
React obsługuje wszystkie popularne przeglądarki, w tym Internet Explorer 9 i nowsze wersje, chociaż [niektóre polyfills są wymagane](/docs/javascript-environment-requirements.html)w starszych przeglądarkach, takich jak IE 9 i IE 10.
23
+
React wspiera wszystkie popularne przeglądarki, w tym Internet Explorer 9 i nowsze wersje, chociaż w starszych przeglądarkach, takich jak IE 9 i IE 10, [wymagane są niektóre łatki](/docs/javascript-environment-requirements.html) (ang. *polyfills*).
24
24
25
25
> Uwaga
26
26
>
27
-
>Nie obsługujemy starszych przeglądarek, które nie obsługują metod ES5, ale być może okaże się, że twoje aplikacje działają w starszych przeglądarkach, jeśli używasz takich narzędzi, jak [es5-shim i es5-sham](https://github.com/es-shims/es5-shim) są zawarte na stronie. Jesteś sam, jeśli wybierzesz tę drogę.
27
+
>Nie wspieramy starszych przeglądarek, które nie obsługują metod ze standardu ES5, lecz aplikacja może zadziałać na nich, jeśli użyjesz odpowiednich łatek, jak na przykład [es5-shim i es5-sham](https://github.com/es-shims/es5-shim). Pamiętaj jednak, że pójście tą drogą skazuje cię na całkowitą samodzielność.
28
28
29
29
* * *
30
30
31
-
## Odniesienie {#reference}
31
+
## Dokumentacja {#reference}
32
32
33
33
### `render()` {#render}
34
34
35
35
```javascript
36
36
ReactDOM.render(element, container[, callback])
37
37
```
38
38
39
-
Renderuj element React do DOM w podanym`container` i zwróć [odniesienie](/docs/more-about-refs.html) do komponentu (lub zwróć`null` dla [komponentów bezstanowych](/docs/components-and-props.html#functional-and-class-components)).
39
+
Renderuje element reactowy do drzewa DOM, do kontenera podanego w argumencie`container`, i zwraca [referencję](/docs/more-about-refs.html) do komponentu (lub `null` dla [komponentów bezstanowych](/docs/components-and-props.html#functional-and-class-components)).
40
40
41
-
Jeśli element React był wcześniej renderowany do `container`, to wykona na nim aktualizację i zmodyfikuje DOM tylko w razie potrzeby, aby odzwierciedlić ostatni element React.
41
+
Jeśli element reactowy był już wcześniej renderowany do kontenera `container`, zostanie on automatycznie zaktualizowany przez Reacta, który odpowiednio zmodyfikuje DOM tak, aby odzwierciedlić najnowszą wersję komponentu.
42
42
43
-
Jeśli dostępne jest opcjonalne wywołanie zwrotne, zostanie ono wykonane po wyrenderowaniu lub zaktualizowaniu komponentu.
43
+
Jeśli w argumencie `callback` przekażesz funkcję zwrotną, zostanie ona wywołana po wyrenderowaniu lub zaktualizowaniu komponentu.
44
44
45
45
> Uwaga:
46
46
>
47
-
>`ReactDOM.render ()` kontroluje zawartość podanego węzła kontenera. Wszelkie istniejące elementy DOM wewnątrz są wymieniane po pierwszym wywołaniu. Późniejsze wywołania używają algorytmu dyfrakcyjnego DOM React do wydajnych aktualizacji.
47
+
>`ReactDOM.render()` kontroluje zawartość podanego węzła kontenera. Po pierwszym wywołaniu zastępowane są wszystkie elementy DOM wewnątrz niego. Każde kolejne wywołania, z pomocą reactowego algorytmu różnicującego, efektywnie aktualizują drzewo.
48
+
48
49
>
49
-
>`ReactDOM.render ()` nie modyfikuje węzła kontenera (modyfikuje tylko elementy potomne kontenera). Może istnieć możliwość wstawienia komponentu do istniejącego węzła DOM bez nadpisywania istniejących elementów podrzędnych.
50
+
>`ReactDOM.render()` nie modyfikuje węzła kontenera (jedynie jego elementy potomne). Możliwe jest wstawienie komponentu do istniejącego węzła DOM bez nadpisywania istniejących elementów podrzędnych.
51
+
50
52
>
51
-
> `ReactDOM.render ()` obecnie zwraca odwołanie do głównej instancji `ReactComponent`. Jednak użycie tej wartości powrotnej jest starszą wersją
52
-
> i należy tego unikać, ponieważ przyszłe wersje React mogą w niektórych przypadkach wyrenderować komponenty asynchronicznie. Jeśli potrzebujesz odniesienia do głównej instancji `ReactComponent`, preferowanym rozwiązaniem jest dołączenie
53
-
> [referencyjne wywołanie zwrotne](/docs/more-about-refs.html#the-ref-callback-attribute) do elementu głównego.
53
+
> `ReactDOM.render()` obecnie zwraca referencję do instancji klasy `ReactComponent`, będącej korzeniem drzewa. Jednak używanie tej referencji jest uznawane za przestarzałą praktykę
54
+
55
+
> i należy jej unikać, ponieważ przyszłe wersje Reacta mogą w niektórych przypadkach renderować komponenty asynchronicznie. Jeśli potrzebujesz referencji do instancji korzenia, sugerujemy przekazanie do niego
56
+
57
+
> [referencyjnej funkcji zwrotnej](/docs/more-about-refs.html#the-ref-callback-attribute).
58
+
54
59
>
55
-
> Użycie `ReactDOM.render ()` w celu uwodnienia kontenera renderowanego przez serwer jest przestarzałe i zostanie usunięte w React 17. Zamiast tego użyj [`hydrate ()`](#hydrate).
60
+
> Używanie `ReactDOM.render()` do odtworzenia (ang. *hydrating*) kontenera renderowanego po stronie serwer jest przestarzałą praktyką i zostanie uniemożliwione w Reakcie 17. Zamiast tego użyj funkcji [`hydrate()`](#hydrate).
61
+
56
62
57
63
* * *
58
64
@@ -62,16 +68,16 @@ Jeśli dostępne jest opcjonalne wywołanie zwrotne, zostanie ono wykonane po wy
62
68
ReactDOM.hydrate(element, container[, callback])
63
69
```
64
70
65
-
To samo, co [`render ()`](#render), ale służy do uwadniania kontenera, którego treść HTML została wyrenderowana przez [`ReactDOMServer`](/docs/react-dom-server.html). React podejmie próbę dołączenia detektorów zdarzeń do istniejących znaczników.
66
-
67
-
React oczekuje, że renderowana treść jest identyczna między serwerem a klientem. Może poprawiać różnice w treści tekstu, ale należy traktować niedopasowania jako błędy i naprawiać je. W trybie programowania React ostrzega przed niedopasowaniem podczas nawodnienia. Nie ma gwarancji, że różnice atrybutów zostaną załatane w przypadku niedopasowania. Jest to ważne ze względu na wydajność, ponieważ w większości aplikacji niedopasowania są rzadkie, a zatem sprawdzenie wszystkich znaczników byłoby zbyt drogie.
71
+
Działa podobnie do funkcji [`render()`](#render), ale służy do odtworzenia kontenera, którego struktura HTML została wyrenderowana przez [`ReactDOMServer`](/docs/react-dom-server.html). React podejmie próbę dołączenia detektorów zdarzeń do istniejących elementów.
68
72
69
-
Jeśli atrybut pojedynczego elementu lub treść tekstu jest nieuchronnie różna między serwerem a klientem (na przykład znacznikiem czasu), możesz wyciszyć ostrzeżenie, dodając do niego element `suppressHydrationWarning={true}`. Działa tylko na jednym poziomie głębokości i ma być lukem ewakuacyjnym. Nie nadużywaj tego. Jeśli nie jest to treść tekstowa, React nadal nie będzie próbował tego poprawiać, więc może pozostać niespójny do przyszłych aktualizacji
73
+
React oczekuje, że renderowana treść będzie identyczna między serwerem a klientem. Potrafi, co prawda, poprawić różnice w treści tekstu, ale należy traktować niedopasowania jako błędy i zawsze je naprawiać. W trybie deweloperskim React ostrzega przed niedopasowaniem podczas procesu odtwarzania struktury. Nie ma gwarancji, że różnice w atrybutach zostaną odpowiednio poprawione w przypadku niedopasowania. Jest to ważne ze względu na wydajność, ponieważ w większości aplikacji niedopasowania są rzadkie, a zatem sprawdzenie wszystkich znaczników byłoby zbyt kosztowne obliczeniowo.
70
74
71
-
Jeśli celowo potrzebujesz renderować coś innego na serwerze i kliencie, możesz wykonać renderowanie dwuprzebiegowe. Komponenty, które renderują coś innego na kliencie, mogą odczytać zmienną stanu, taką jak `this.state.isClient`, którą można ustawić na`true` w `componentDidMount ()`. W ten sposób początkowe przejście renderowania będzie renderować tę samą zawartość co serwer, unikając niedopasowania, ale dodatkowe przejście stanie się synchroniczne zaraz po nawodnieniu. Zauważ, że to podejście spowolni działanie komponentów, ponieważ będą musiały być renderowane dwukrotnie, więc używaj go z rozwagą.
75
+
Jeśli któryś z atrybutów elementu lub treść tekstu intencjonalnie różnią się między serwerem a klientem (jak w przypadku znacznika czasu), możesz wyciszyć ostrzeżenie, dodając do elementu atrybut `suppressHydrationWarning={true}`. Działa to tylko na tym konkretnym elemencie i jest swego rodzaju "wyjściem awaryjnym". Nie nadużywaj go. O ile nie jest to treść tekstowa, React nie będzie próbował na siłę nanosić poprawek, więc wartość może pozostać niespójna do momentu jej kolejnej aktualizacji.
72
76
73
-
Pamiętaj, aby pamiętać o doświadczeniach użytkowników na wolnych połączeniach. Kod JavaScript może załadować się znacznie później niż początkowy render HTML, więc jeśli renderujesz coś innego w przepustce tylko dla klienta, przejście może być szarpane. Jeśli jednak zostanie dobrze wykonane, może być korzystne renderowanie "powłoki" aplikacji na serwerze i pokazywanie tylko niektórych dodatkowych widżetów na kliencie. Aby dowiedzieć się, jak to zrobić, nie napotykając problemów związanych z niedopasowaniem znaczników, zapoznaj się z wyjaśnieniem w poprzednim akapicie.
77
+
Jeśli potrzebujesz celowo renderować coś innego po stronie serwera i klienta, możesz wykonać renderowanie dwuprzebiegowe. Komponenty, które renderują coś innego po stronie klienta, mogą bazować na zmiennej stanu, np. `this.state.isClient`, którą można ustawić na `true` w metodzie `componentDidMount()`. W ten sposób początkowe renderowania zwróci tę samą zawartość co serwer, unikając niedopasowania. Jednak zaraz po odtworzeniu struktury w sposób synchroniczny nastąpi dodatkowe renderowanie. Zauważ, że to podejście spowolni działanie komponentów, ponieważ będą musiały być renderowane dwukrotnie - dlatego używaj go z rozwagą.
74
78
79
+
Pamiętaj, aby zwrócić uwagę na tzw. "user experience" użytkowników z wolnym połączeniem internetowym. Kod javascriptowy może załadować się znacznie później niż nastąpi pierwsze renderowanie kodu HTML. Z tego powodu, jeśli wyrenderujesz coś innego podczas przebiegu po stronie klienta, strona może się "przycinać". Możliwe, że w tej sytuacji pomoże wyrenderowanie "powłoki" (ang. *shell*) aplikacji po stronie serwera, a w kliencie wyświetlenie jedynie dodatkowych widgetów. Aby dowiedzieć się, jak to zrobić, nie napotykając problemów związanych z niedopasowaniem znaczników, zapoznaj się z wyjaśnieniem zawartym w poprzednim akapicie.
@@ -80,29 +86,31 @@ Pamiętaj, aby pamiętać o doświadczeniach użytkowników na wolnych połącze
80
86
ReactDOM.unmountComponentAtNode(container)
81
87
```
82
88
83
-
Usuń zamontowany komponent React z DOM i wyczyść jego procedury obsługi zdarzeń i stan. Jeśli w kontenerze nie zamontowano żadnego komponentu, wywołanie tej funkcji nic nie da. Zwraca `true`, jeśli komponent został odmontowany i `false`, jeśli nie było komponentu do odmontowania.
89
+
Usuń zamontowany składniki wchodzący w reakcję z DOM i wyczyść jego programy obsługi zdarzeń i ustawienia. Jeśli w zasobniku nie zamontowano żadnego elementu, wywoływanie tej funkcji nic nie robi. Zwraca `true` jeśli składnik nie był zamontowany i `false` jeśli nie było składnika do odmontowania.
84
90
85
91
* * *
86
92
87
93
### `findDOMNode()` {#finddomnode}
88
94
89
95
> Uwaga:
90
96
>
91
-
> `findDOMNode` to luka ucieczki używana do uzyskania dostępu do podstawowego węzła DOM. W większości przypadków korzystanie z tego luku ewakuacyjnego jest odradzane, ponieważ przenosi abstrakcję składnika. [Został przestarzały w `StrictMode`.](/Docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
97
+
> `findDOMNode`jest to tylna furtka używana do uzyskania dostępu do podstawowego węzła DOM. W większości przypadków ta tylna furtka może zniechęcic ponieważ dziurawi składniki abstrakcji. [Została wycofana w `StrictMode`.](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
92
98
93
99
```javascript
94
100
ReactDOM.findDOMNode(component)
95
101
```
96
-
Jeśli komponent ten został zamontowany w DOM, zwraca odpowiedni element DOM przeglądarki rodzimej. Ta metoda jest przydatna do odczytu wartości z DOM, takich jak wartości pól formularza i wykonywanie pomiarów DOM. **W większości przypadków można dołączyć ref do węzła DOM i unikać używania `findDOMNode` w ogóle.**
97
102
98
-
Kiedy komponent renderuje do `null` lub` false`, `findDOMNode` zwraca` null`. Kiedy komponent renderuje łańcuch, `findDOMNode` zwraca tekst DOM węzeł zawierający tę wartość. Od Reakcji 16 komponent może zwrócić fragment z wieloma potomkami, w którym to przypadku `findDOMNode` zwróci węzeł DOM odpowiadający pierwszemu niepustemu potomkowi.
103
+
Jeśli ten komponent został zamontowany w DOM, to zwraca odpowiednią macierzystą przeglądarkę elementu DOM. Ta metoda jest użyteczna do odczytywania wartości z DOM, takie jak wartości pól i wykonywanie pomiarów DOM. **W większości przypadków, możesz dołączyć do DOM węzeł i unikaj używania `findDOMNode` w ogóle.**
104
+
105
+
Kiedy komponent renderuje `null` albo `false`, `findDOMNode` zwraca `null`. Kiedy komponent renderuje ciąg, `findDOMNode` zwraca tekst węzła DOM zawierający tą wartość. Od Reakt 16, komponent może zwrócić część z wieloma dziećmi, w przypadku `findDOMNode` zwróci węzeł DOM odpowiadający pierwszemu nie pustemu dziecku.
99
106
100
107
> Uwaga:
101
108
>
102
-
> `findDOMNode` działa tylko na zamontowanych komponentach (czyli komponentach, które zostały umieszczone w DOM). Jeśli spróbujesz wywołać to na komponencie, który nie został jeszcze zamontowany (jak wywołanie `findDOMNode()` w `render()` na komponencie, który nie został jeszcze utworzony) zostanie zgłoszony wyjątek.
109
+
> `findDOMNode` działa tylko na zamontowanych komponentach (tylko te komponenty które zostały umieszczone w DOM) Jeśli spróbujesz przywołać to na komponencie który nie był jeszcze zamontowany (jak wywołanie `findDOMNode()` w `render()` na komponencie jeszcze nie stworzonym) zostanie zgłoszony wyjątek.
103
110
>
104
111
> `findDOMNode` nie może być używane w komponentach funkcji.
105
112
113
+
106
114
* * *
107
115
108
116
### `createPortal()` {#createportal}
@@ -111,4 +119,4 @@ Kiedy komponent renderuje do `null` lub` false`, `findDOMNode` zwraca` null`. Ki
111
119
ReactDOM.createPortal(child, container)
112
120
```
113
121
114
-
Tworzy portal. Portale zapewniają sposób na [renderowanie dzieci do węzła DOM, który istnieje poza hierarchią komponentu DOM](/docs/portals.html).
122
+
Tworzy portal. Portal zapewnia sposób do [przedstawiania dziecka w węźle DOM które istnieje poza hierarchią komponentu DOM](/docs/portals.html).
0 commit comments