From 0cd1d3273e3463b17b77de63128eba6114a6a603 Mon Sep 17 00:00:00 2001 From: czechowiczmateusz Date: Mon, 4 Mar 2019 10:25:53 +0100 Subject: [PATCH 1/3] Translate 'DOM Elements' page --- content/docs/reference-dom-elements.md | 86 +++++++++---------- .../TitleAndMetaTags/TitleAndMetaTags.js | 3 +- src/pages/index.js | 3 +- 3 files changed, 47 insertions(+), 45 deletions(-) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 52e780b96..a2e4c1537 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -1,6 +1,6 @@ --- id: dom-elements -title: DOM Elements +title: Elementy DOM layout: docs category: Reference permalink: docs/dom-elements.html @@ -14,31 +14,31 @@ redirect_from: - "tips/dangerously-set-inner-html.html" --- -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. +Dla poprawy wydajności oraz kompatybilności między przeglądarkami React wprowadza niezależny od przeglądarki system DOM. To dało nam możliwość ulepszenia pewnych wad, występujących w przeglądarkowej implementacji DOM. -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`. +W Reakcie wszystkie właściwości i atrybuty DOM (włącznie z obsługą zdarzeń) powinny być zapisane camelCasem. Dla przykładu, atrybut HTML `tabindex` odpowiada atrybutowi `tabIndex` w React. Wyjątkiem są atrybuty `aria-*` oraz `data-*`, które powinny być zapisane małą literą (ang. *lowercase*). Na przykład `aria-label` pozostaje `aria-label`. -## Differences In Attributes {#differences-in-attributes} +## Różnice w atrybutach {#differences-in-attributes} -There are a number of attributes that work differently between React and HTML: +Jest kilka atrybutów, które działają inaczej niż w HTML: ### checked {#checked} -The `checked` attribute is supported by `` 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. +Atrybut `checked` jest wspierany przez element `` typu `checkbox` lub `radio`. Możesz go użyć do sprawdzenia czy element jest zaznaczony. Jest to przydatne do budowania kontrolowanych komponentów. `defaultChecked` jest niekontrolowanym odpowiednikiem, który określa, czy komponent jest zaznaczony przy pierwszym zamontowaniu. ### className {#classname} -To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `
`, ``, and others. +Do przypisania klasy CSS użyj atrybutu `className`. To dotyczy wszystkich standardowych elementów DOM oraz SVG, takich jak `
`, `` i innych. -If you use React with Web Components (which is uncommon), use the `class` attribute instead. +Gdy używasz Reakta z Web Components (co jest rzadkie), użyj atrybutu `class`. ### dangerouslySetInnerHTML {#dangerouslysetinnerhtml} -`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: +`dangerouslySetInnerHTML` jest zamiennikiem Reacta dla `innerHTML` w przeglądarkowym DOM. Ogólnie używanie HTML w kodzie jest ryzykowane, ponieważ jest łatwo nieumyślnie narazić Twoich użytkowników na atak [cross-site scripting (XSS)](https://pl.wikipedia.org/wiki/Cross-site_scripting). Dlatego możesz wstawić HTML bezpośrednio w React, ale musisz to zrobić poprzez `dangerouslySetInnerHTML` i przekazać objekt z kluczem `__html`, dla przypomnienia sobie, że jest to niebezpieczne. Przykład: ```js function createMarkup() { - return {__html: 'First · Second'}; + return {__html: 'Pierwszy · Drugi'}; } function MyComponent() { @@ -48,95 +48,95 @@ function MyComponent() { ### htmlFor {#htmlfor} -Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. +Od kiedy `for` jest zarezerwowanym słowem w JavaScript, React używa `htmlFor` zamiast tego. ### onChange {#onchange} -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. +Zdarzenie `onChange` zachowuję się tak jak powinno: gdy pole formularza się zmienia, zdarzenie jest aktywowane. Specjalnie nie używamy obecnego w przeglądarce zachowania, ponieważ `onChange` jest błędną nazwą dla jego zachowania, a React opiera się na tym zdarzeniu do obsłużenia znacznika `` w czasie rzeczywistym. ### selected {#selected} -The `selected` attribute is supported by `