Translate "Refs Forwarding" page

Author: pmartyniak

content/docs/forwarding-refs.md

@@ -4,29 +4,29 @@ title: Przekazywanie referencji
 permalink: docs/forwarding-refs.html
 ---
 
-Przekazywanie referencji (ang. "Ref forwarding") to technika wysyłania [referencji](/docs/refs-and-the-dom.html)
-poprzez komponent do jednego z jego dzieci. Dla większości komopentów w aplikacji zazwyczaj nie jest to potrzebne.
-Może jednak okazać się przydatne w niektórych przypdkach. W szczególności w wielokrotnie używanych komponentach bibliotecznych. 
+Przekazywanie referencji (ang. "Ref forwarding") to technika, w której [referencję](/docs/refs-and-the-dom.html)
+do komponentu "podajemy dalej" do jego dziecka. Dla większości komponentów w aplikacji nie jest to potrzebne.
+Może jednak okazać się przydatne w niektórych przypadkach. W szczególności w _wielokrotnie używanych_ komponentach bibliotecznych. 
 Najczęstsze scenariusze opisujemy poniżej.
 
 ## Przekazywanie referencji do komponentów DOM {#forwarding-refs-to-dom-components}
 
-Rozważmy `FancyButton` - komponent, który renderuje natywny element DOM - przycisk (`button`):
+Rozważmy `FancyButton` - komponent, który renderuje natywny element DOM - przycisk:
 `embed:forwarding-refs/fancy-button-simple.js`
 
 Komponenty reactowe ukrywają szczegóły swojej implementacji, w tym także wyrenderowany HTML.
-Inne komponenty używające `FancyButton` **z reguły nie potrzebują** [mieć dosypozycji referencji](/docs/refs-and-the-dom.html) do wewnętrznego elementu `button`.
+Inne komponenty używające `FancyButton` **z reguły nie potrzebują** [mieć dostępu do referencji](/docs/refs-and-the-dom.html) do wewnętrznego elementu `button`.
 Jest to korzystne, gdyż zapobiega sytuacji, w której komponenty są za bardzo uzależnione od struktury drzewa DOM innych komponentów. 
 
-Taka enkapsulacja jest pożądana na poziomie aplikacji, w komponentach takich jak `FeedStory` czy `Comment`. Natomiast może się okazać to niewygodne w przypadku komponentów "wielokrotnego użytku", będących "liśćmi" drzewa takich, jak `FancyButton` albo `MyTextInput`. Takie komponenty często używane są na wszędzie w aplikacji w podobny sposób jak zwyczajne elementy DOM typu `button` i `input`. W wiązku z tym dostęp do ich DOM może okazać się konieczy, aby obsłużyć fokus, zaznaczenie, czy animacje. 
+Taka enkapsulacja jest pożądana na poziomie aplikacji, w komponentach takich jak `FeedStory` czy `Comment`. Natomiast może się okazać to niewygodne w przypadku komponentów wielokrotnego użytku, będących "liśćmi" drzewa. Np. `FancyButton` albo `MyTextInput`. Takie komponenty często używane są w wielu miejscach aplikacji w podobny sposób, jak zwyczajne elementy DOM typu `button` i `input`. W wiązku z tym bezpośredni dostęp do ich DOM może okazać się konieczy, aby obsłużyć fokus, zaznaczenie, czy animacje. 
 
 **Przekazywanie referencji jest opcjonalną funkcjonalnością, która pozwala komponentom wziąć referencję do nich przekazaną i "podać dalej" do swojego dziecka.**
 
 W poniższym przykładzie `FancyButton` używa `React.forwardRef`, by przejąć przekazaną do niego referencję i podać ją dalej do elementu `button`, który renderuje:
 
 `embed:forwarding-refs/fancy-button-simple-ref.js`
 
-Tym sposobem komponenty używające `FancyButton` mają referencję do znajdującego się w głębi elementu DOM i mogą w razie potrzeby operować na nim tak, jakby operowały bezpośrednio na elemencie `button`. 
+Tym sposobem komponenty używające `FancyButton` mają referencję do znajdującego się w głębi elementu `button`. Mogą więc w razie potrzeby operować na komponencie tak, jakby operowały bezpośrednio na natywnym elemencie DOM.
 
 Oto krok po kroku - co wydarzyło się w przykładzie powyżej:
 
@@ -38,13 +38,13 @@ Oto krok po kroku - co wydarzyło się w przykładzie powyżej:
 
 >Uwaga
 >
->Drugi argument `ref` istnieje tylko, gdy definiujesz komponent przy pomocy wywołania `React.forwardRef`. Zwyczajna funkcja lub klasa nie dostanie argumentu `ref`, nawet jako typowej właściwości Reactowej (ang. "props").
+>Drugi argument `ref` istnieje tylko, gdy definiujesz komponent przy pomocy wywołania `React.forwardRef`. Zwyczajna funkcja lub klasa nie dostanie argumentu `ref`, nawet jako typowej właściwości Reactowej ("props").
 >
 >Przekazywanie referencji nie jest ograniczone do elementów drzewa DOM. Możesz także przekazywać referencje do instancji komponentów klasowych.
 
 ## Uwaga dla autorów bibliotek komonentów {#note-for-component-library-maintainers}
 
-**Jeśli zaczniesz używać `forwardRef` w swojej bibliotece komponentów, powinno być to trakotwane jako zmiana krytyczna (ang. "breaking change"). W efekcie bibliteka powinna być wydana w nowej "wersji głównej" (ang. "major version", "major release").** Jest tak, ponieważ najprawdopodobniej Twoja biblioteka zauważalnie zmieniła zachowanie (np. do czego przypinane są referencje i jakie typy są eksportowane), a to może popsuć działanie aplikacji, które zależne są od dawnego zachowania.
+**Jeśli zaczniesz używać `forwardRef` w swojej bibliotece komponentów, powinno być to trakotwane jako zmiana krytyczna (ang. "breaking change"). W efekcie bibliteka powinna być wydana w nowej "wersji głównej" (ang. "major version", "major release").** Jest tak, ponieważ najprawdopodobniej Twoja biblioteka zauważalnie zmieniła zachowanie (np. inaczej przypinając referencje i eksportując inne typy). Może to popsuć działanie aplikacji, które są zależne od dawnego zachowania.
 
 Stosowanie `React.forwardRef` warunkowo, gdy ono istnieje, także nie jest zalecane z tego samego powodu: zmienia to zachowanie biblioteki i może zepsuć działanie aplikacji użytkowników, gdy zmienią wersję Reacta.  
 
@@ -54,7 +54,7 @@ Omawiana technika może okazać się wyjątkowo przydatna w [Komponentach Wyższ
 
 `embed:forwarding-refs/log-props-before.js`
 
-KWR `logProps` przekazuje wszystkie atrybuty do komponentu który owija, więc wyrenderowany wynik będzie taki sam. Na przykład możemy użyć tego KWRa do logowania atrybutów, które zostaną przekazane do naszego komponentu `FancyButton`:
+KWR `logProps` przekazuje wszystkie atrybuty do komponentu, który opakowuje, więc wyrenderowany wynik będzie taki sam. Na przykład możemy użyć tego KWRa do logowania atrybutów, które zostaną przekazane do naszego komponentu `FancyButton`:
 `embed:forwarding-refs/fancy-button.js`
 
 Powyższe rozwiązanie ma jeden minus: referencje nie zostaną przekazane do komponentu. Dzieje się tak, ponieważ `ref` nie jest atrybutem. Tak jak `key`, jest on obsługiwany prez Reacta inaczej. Referencja będzie w tym wypadku odnosiła się do najbardziej zewnętrznego kontenera, a nie do owiniętego komponentu. 
@@ -67,7 +67,7 @@ Na szczęście możemy wprost przekazać referencję do wewnętrznego komponentu
 
 ## Wyświetlanie własnej nazwy w narzędziach deweloperskich {#displaying-a-custom-name-in-devtools}
 
-`React.forwardRef` przyjmuje funkcję renderującą. Narzędzia deweloperskie Reacta (ang. "React DevTools") uzywają tej funkcji do określenia, co pokazać jako komonent, który przekazuje referencję.
+`React.forwardRef` przyjmuje funkcję renderującą. Narzędzia deweloperskie Reacta ("React DevTools") używają tej funkcji do określenia, jak pokazać komonent, który przekazuje referencję.
 
 Przykładowo, następujący komponent w narzędziach deweloperskich wyświetli się jako "*ForwardRef*":
 
@@ -77,6 +77,6 @@ Jeśli nazwiesz funkcję renderującą, narzędzia deweloperskie uwzględnią t
 
 `embed:forwarding-refs/wrapped-component-with-function-name.js`
 
-Możesz nawet ustawić właściwość `displayName` funkcji tak, aby uwzględniała nazwę owijanego komponentu:
+Możesz nawet ustawić właściwość `displayName` funkcji tak, aby uwzględniała nazwę opakowanego komponentu:
 
 `embed:forwarding-refs/customized-display-name.js`

examples/forwarding-refs/customized-display-name.js

@@ -7,8 +7,8 @@ function logProps(Component) {
     return <LogProps {...props} forwardedRef={ref} />;
   }
 
-  // Give this component a more helpful display name in DevTools.
-  // e.g. "ForwardRef(logProps(MyComponent))"
+  // Nadajmy temu komponentowi nazwę, która będzie bardziej czytelna w narzędziach deweloperskich.
+  // np. "ForwardRef(logProps(MyComponent))"
   // highlight-range{1-2}
   const name = Component.displayName || Component.name;
   forwardRef.displayName = `logProps(${name})`;

examples/forwarding-refs/fancy-button-ref.js

@@ -3,10 +3,10 @@ import FancyButton from './FancyButton';
 // highlight-next-line
 const ref = React.createRef();
 
-// The FancyButton component we imported is the LogProps HOC.
-// Even though the rendered output will be the same,
-// Our ref will point to LogProps instead of the inner FancyButton component!
-// This means we can't call e.g. ref.current.focus()
+// Komponent FancyButton, który zaimportowaliśmy jest tak naprawdę KWRem LogProps.
+// Mimo że wyświetlony rezultat będzie taki sam,
+// nasza referencja będzie wskazywała na LogProps zamiast na komponent FancyButton!
+// Oznacza to, że nie możemy wywołać np. metody ref.current.focus()
 // highlight-range{4}
 <FancyButton
   label="Click Me"

examples/forwarding-refs/fancy-button-simple-ref.js

@@ -5,6 +5,6 @@ const FancyButton = React.forwardRef((props, ref) => (
   </button>
 ));
 
-// You can now get a ref directly to the DOM button:
+// Możesz teraz otrzymać bezpośrednią referencję do elementu „button”:
 const ref = React.createRef();
 <FancyButton ref={ref}>Click me!</FancyButton>;

examples/forwarding-refs/fancy-button.js

@@ -6,7 +6,7 @@ class FancyButton extends React.Component {
   // ...
 }
 
-// Rather than exporting FancyButton, we export LogProps.
-// It will render a FancyButton though.
+// Zamiast FancyButton, exportujemy LogProps.
+// Jednak wyrenderowany zostanie FancyButton.
 // highlight-next-line
 export default logProps(FancyButton);

examples/forwarding-refs/log-props-after.js

@@ -9,15 +9,15 @@ function logProps(Component) {
       // highlight-next-line
       const {forwardedRef, ...rest} = this.props;
 
-      // Assign the custom prop "forwardedRef" as a ref
+      // 2. Przypiszmy nasz atrybut "forwardedRef" jako referencję
       // highlight-next-line
       return <Component ref={forwardedRef} {...rest} />;
     }
   }
 
-  // Note the second param "ref" provided by React.forwardRef.
-  // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
-  // And it can then be attached to the Component.
+  // 1. Zwróć uwagę na drugi parametr "ref" dostarczony przez React.forwardRef.
+  // Możemy go przekazać dalej do LogProps jako zwyczajny atrybut, np. "forwardedRef".
+  // Następnie może on być przypisany do komponentu wewnątrz.
   // highlight-range{1-3}
   return React.forwardRef((props, ref) => {
     return <LogProps {...props} forwardedRef={ref} />;