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-dom-elements.md
+42-42
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
id: dom-elements
3
-
title: DOM Elements
3
+
title: Elementy DOM
4
4
layout: docs
5
5
category: Reference
6
6
permalink: docs/dom-elements.html
@@ -14,31 +14,31 @@ redirect_from:
14
14
- "tips/dangerously-set-inner-html.html"
15
15
---
16
16
17
-
React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations.
17
+
Dla poprawy wydajności oraz kompatybilności między przeglądarkami, React wprowadza niezależny od przeglądarki system DOM. Dało to nam możliwość naprawienia pewnych usterek występujących w przeglądarkowych implementacjach DOM.
18
18
19
-
In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute `tabindex`corresponds to the attribute`tabIndex` in React. The exception is`aria-*`and`data-*` attributes, which should be lowercased. For example, you can keep `aria-label`as`aria-label`.
19
+
W Reakcie wszystkie właściwości i atrybuty DOM (włącznie z obsługą zdarzeń) powinny być zapisywane w notacji camelCase. Dla przykładu, atrybut HTML `tabindex`w Reakcie zapisujemy jako`tabIndex`. Wyjątkiem są atrybuty`aria-*`oraz`data-*`, które powinny być zapisywane małą literą, na przykład, `aria-label`pozostaje`aria-label`.
20
20
21
-
## Differences In Attributes {#differences-in-attributes}
21
+
## Różnice w atrybutach {#differences-in-attributes}
22
22
23
-
There are a number of attributes that work differently between React and HTML:
23
+
W Reakcie kilka atrybutów działa inaczej niż w HTML-u:
24
24
25
25
### checked {#checked}
26
26
27
-
The`checked`attribute is supported by`<input>`components of type `checkbox`or`radio`. You can use it to set whether the component is checked. This is useful for building controlled components. `defaultChecked` is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted.
27
+
Atrybut`checked`jest wspierany przez element`<input>`typu `checkbox`lub`radio`. Za jego pomocą można dany element ustawić jako odznaczony. Jest to przydatne podczas budowania kontrolowanych komponentów. W przypadku komponentów niekontrolowanych należy używać `defaultChecked`, który określa, czy komponent ma być odznaczony przy pierwszym zamontowaniu.
28
28
29
29
### className {#classname}
30
30
31
-
To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like`<div>`, `<a>`, and others.
31
+
Aby przypisać klasę CSS, należy użyć atrybutu `className`. Dotyczy to wszystkich standardowych elementów DOM oraz SVG, takich jak`<div>`, `<a>` i innych.
32
32
33
-
If you use React with Web Components (which is uncommon), use the`class` attribute instead.
33
+
Gdy używasz Reacta z Web Components (co jest rzadkie), stosuj atrybut`class`.
`dangerouslySetInnerHTML`is React's replacement for using `innerHTML`in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out`dangerouslySetInnerHTML`and pass an object with a `__html`key, to remind yourself that it's dangerous. For example:
37
+
`dangerouslySetInnerHTML`jest reactowym odpowiednikiem dla `innerHTML`z przeglądarkowego DOM. Ogólnie rzecz biorąc, używanie HTML w kodzie jest ryzykowne, ponieważ łatwo jest nieumyślnie narazić użytkowników na atak [cross-site scripting (XSS)](https://pl.wikipedia.org/wiki/Cross-site_scripting). Z tego powodu jedynym sposobem na wstawienie HTML bezpośrednio w Reakcie jest użycie właściwości`dangerouslySetInnerHTML`i przekazanie obiektu z kluczem `__html`-- wszystko po to, żeby pamiętać, iż jest to niebezpieczne. Przykład:
38
38
39
39
```js
40
40
functioncreateMarkup() {
41
-
return {__html:'First · Second'};
41
+
return {__html:'Pierwszy · Drugi'};
42
42
}
43
43
44
44
functionMyComponent() {
@@ -48,23 +48,23 @@ function MyComponent() {
48
48
49
49
### htmlFor {#htmlfor}
50
50
51
-
Since `for`is a reserved word in JavaScript, React elements use `htmlFor` instead.
51
+
Jako że `for`jest zarezerwowanym słowem w JavaScripcie, React używa zamiast niego `htmlFor`.
52
52
53
53
### onChange {#onchange}
54
54
55
-
The`onChange`event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange`is a misnomer for its behavior and React relies on this event to handle user input in real time.
55
+
Zdarzenie`onChange`przebiega zgodnie z oczekiwaniami: jest aktywowane za każdym razem, gdy zmienia się wartość w polu formularza. Specjalnie nie używamy implementacji przeglądarkowej, ponieważ `onChange`ma nazwę nieadekwatną do zachowania. React natomiast używa tego zdarzenia do obsłużenia w czasie rzeczywistym zmian w danych wejściowych kontrolki formularza.
56
56
57
57
### selected {#selected}
58
58
59
-
The`selected`attribute is supported by`<option>` components. You can use it to set whether the component is selected. This is useful for building controlled components.
59
+
Atrybut`selected`jest wspierany przez element`<option>`. Można go użyć, aby odznaczyć wybrany przez użytkownika element listy. Przydaje się to podczas budowania kontrolowanych komponentów.
60
60
61
61
### style {#style}
62
62
63
-
>Note
63
+
>Wskazówka
64
64
>
65
-
>Some examples in the documentation use `style`for convenience, but **using the`style`attribute as the primary means of styling elements is generally not recommended.** In most cases, [`className`](#classname) should be used to reference classes defined in an external CSS stylesheet. `style`is most often used in React applications to add dynamically-computed styles at render time. See also[FAQ: Styling and CSS](/docs/faq-styling.html).
65
+
>Niektóre przykłady w dokumentacji używają `style`dla wygody, ale ogólnie rzecz biorąc, **używanie atrybutu`style`do stylowania elementów nie jest zalecane.** W większości przypadków należy korzystać z atrybutu [`className`](#classname), odnosząc się do klas definiowanych w zewnętrznym arkuszu stylów (ang. *stylesheet*). `style`jest najczęściej używany w aplikacjach reactowych do dodawania stylów dynamicznych, zmieniających się przy kolejnych renderowaniach. Zobacz też[FAQ: Stylowanie i CSS](/docs/faq-styling.html).
66
66
67
-
The`style`attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style`JavaScript property, is more efficient, and prevents XSS security holes. For example:
67
+
Atrybut`style`zamiast zwykłego ciągu znaków przyjmuje javascriptowy obiekt z właściwościami CSS zapisanymi w notacji camelCase (nie ciąg znaków jak w CSS). Jest to zgodne z właściwością DOM `style`w JavaScripcie, poprawia wydajność i zapobiega dziurom w zabezpieczeniach przed XSS. Przykład:
68
68
69
69
```js
70
70
constdivStyle= {
@@ -73,70 +73,70 @@ const divStyle = {
73
73
};
74
74
75
75
functionHelloWorldComponent() {
76
-
return<div style={divStyle}>Hello World!</div>;
76
+
return<div style={divStyle}>Witaj, świecie</div>;
77
77
}
78
78
```
79
79
80
-
Note that styles are not autoprefixed. To support older browsers, you need to supply corresponding style properties:
80
+
Zauważ, że style nie mają automatycznie nadawanego prefiksu. Aby zapewnić kompatybilność ze starszymi przeglądarkami, musisz nadać im odpowiednie właściwości:
81
81
82
82
```js
83
83
constdivStyle= {
84
-
WebkitTransition:'all', //note the capital 'W' here
85
-
msTransition:'all'// 'ms' is the only lowercase vendor prefix
84
+
WebkitTransition:'all', //zwróć uwagę na wielką literę 'W'
85
+
msTransition:'all'// 'ms' jest jedynym prefiksem zapisywanym małą literą
86
86
};
87
87
88
88
functionComponentWithTransition() {
89
-
return<div style={divStyle}>This should work cross-browser</div>;
89
+
return<div style={divStyle}>To powinno działać na wielu przeglądarkach</div>;
90
90
}
91
91
```
92
92
93
-
Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g.`node.style.backgroundImage`). Vendor prefixes[other than`ms`](https://www.andismith.com/blogs/2012/02/modernizr-prefixed/)should begin with a capital letter. This is why `WebkitTransition`has an uppercase "W".
93
+
Nazwy kluczy obiektu stylów zapisujemy w notacji camelCase, aby były zgodne z właściwościami węzłów DOM w JS (np.`node.style.backgroundImage`). Prefiksy dostawców (ang. *vendor prefixes*) [inne niż`ms`](https://www.andismith.com/blogs/2012/02/modernizr-prefixed/)powinny zaczynać się od wielkiej litery. Dlatego `WebkitTransition`zaczyna się od wielkiej litery "W".
94
94
95
-
React will automatically append a "px" suffix to certain numeric inline style properties. If you want to use units other than "px", specify the value as a string with the desired unit. For example:
95
+
React automatycznie doda przyrostek "px" (piksele) dla pewnych liczbowych właściwości stylów. Jeśli chcesz użyć innych jednostek niż "px", określ wartość jako ciąg znaków z pożądaną jednostką. Przykład:
96
96
97
97
```js
98
-
//Result style: '10px'
98
+
//Rezultat: '10px'
99
99
<div style={{ height:10 }}>
100
-
Hello World!
100
+
Witaj, świecie!
101
101
</div>
102
102
103
-
//Result style: '10%'
103
+
//Rezultat: '10%'
104
104
<div style={{ height:'10%' }}>
105
-
Hello World!
105
+
Witaj, świecie!
106
106
</div>
107
107
```
108
108
109
-
Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg`zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59).
109
+
Nie wszystkie właściwości stylów są konwertowane do ciągów znaków z przyrostkiem 'px'. Niektóre z nich pozostają bez jednostek (np.`zoom`, `order`, `flex`). Pełna lista wyjątków jest dostępna [tutaj](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59).
Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually.
113
+
Zwykle gdy element posiadający potomka jest oznaczony jako `contentEditable`, pojawia się ostrzeżenie, ponieważ mechanizm ten nie zadziała prawidłowo. Ten atrybut wyłącza to ostrzeżenie. Nie używaj go, chyba że tworzysz bibliotekę ręcznie zarządzającą właściwością `contentEditable`, jak np. [Draft.js](https://facebook.github.io/draft-js/).
If you use server-side React rendering, normally there is a warning when the server and the client render different content. However, in some rare cases, it is very hard or impossible to guarantee an exact match. For example, timestamps are expected to differ on the server and on the client.
117
+
Gdy używasz renderowania po stronie serwera (ang. *server-side*), zwykle pojawia się ostrzeżenie, gdy serwer i klient renderują inną zawartość. Jednakże, w niektórych rzadkich przypadkach, dokładne dopasowanie jest bardzo trudne lub niemożliwe do osiągnięcia. Na przykład, znaczniki czasu zwykle różnią się między serwerem i klientem.
118
118
119
-
If you set`suppressHydrationWarning`to`true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. You can read more about hydration in the [`ReactDOM.hydrate()` documentation](/docs/react-dom.html#hydrate).
119
+
Jeżeli ustawisz właściwość`suppressHydrationWarning`na`true`, React nie ostrzeże cię o niedopasowaniu atrybutów i zawartości tego elementu. Działa to tylko na jednym poziomie zagłębienia i jest używane jako "wyjście awaryjne" z problemu. Nie nadużywaj go. Możesz poczytać więcej o odtwarzaniu struktury (ang. *hydration*) w [dokumentacji funkcji `ReactDOM.hydrate()`](/docs/react-dom.html#hydrate).
120
120
121
121
### value {#value}
122
122
123
-
The`value`attribute is supported by`<input>`and`<textarea>` components. You can use it to set the value of the component. This is useful for building controlled components. `defaultValue`is the uncontrolled equivalent, which sets the value of the component when it is first mounted.
123
+
Atrybut`value`jest wspierany przez elementy`<input>`oraz`<textarea>`. Możesz go użyć do ustawienia wartości komponentu. Jest to przydatne do budowania kontrolowanych komponentów. `defaultValue`jest niekontrolowanym odpowiednikiem tego atrybutu, który określa, jaką wartość powinien mieć komponent przy pierwszym montowaniu.
124
124
125
-
## All Supported HTML Attributes {#all-supported-html-attributes}
125
+
## Wszystkie wspierane atrybuty HTML {#all-supported-html-attributes}
126
126
127
-
As of React 16, any standard [or custom](/blog/2017/09/08/dom-attributes-in-react-16.html)DOM attributes are fully supported.
127
+
Poczynając od wersji 16-stej React wspiera wszystkie standardowe i [niestandardowe](/blog/2017/09/08/dom-attributes-in-react-16.html)atrybuty DOM.
128
128
129
-
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the`camelCase` convention just like the DOM APIs:
129
+
React od zawsze udostępniał interfejs API jak najbardziej podobny do javascriptowego interfejsu DOM. Z racji tego, że komponenty reactowe często przyjmują zarówno właściwości niestandardowe, jak i te związane z modelem DOM, React używa notacji`camelCase`, zupełnie jak interfejs DOM:
130
130
131
131
```js
132
-
<div tabIndex="-1"/>//Just like node.tabIndex DOM API
133
-
<div className="Button"/>//Just like node.className DOM API
134
-
<input readOnly={true} />//Just like node.readOnly DOM API
132
+
<div tabIndex="-1"/>//Dokładnie jak node.tabIndex w DOM API
133
+
<div className="Button"/>//Dokładnie jak node.className w DOM API
134
+
<input readOnly={true} />//Dokładnie jak node.readOnly w DOM API
135
135
```
136
136
137
-
These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.
137
+
Powyższe właściwości działają podobnie jak odpowiadajce im atrybuty HTML, z wyjątkiem specjalnych przypadków wymienionych powyżej.
138
138
139
-
Some of the DOM attributes supported by React include:
139
+
Niektóre atrybuty DOM wspierane przez Reacta to:
140
140
141
141
```
142
142
accept acceptCharset accessKey action allowFullScreen alt async autoComplete
0 commit comments