Translate "Refs Forwarding" page

Author: pmartyniak

content/docs/forwarding-refs.md

@@ -1,76 +1,82 @@
 ---
 id: forwarding-refs
-title: Forwarding Refs
+title: Przekazywanie referencji
 permalink: docs/forwarding-refs.html
 ---
 
-Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below.
+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.
 
-## Forwarding refs to DOM components {#forwarding-refs-to-dom-components}
+## Przekazywanie referencji do komponentów DOM {#forwarding-refs-to-dom-components}
 
-Consider a `FancyButton` component that renders the native `button` DOM element:
+Rozważmy `FancyButton` - komponent, który renderuje natywny element DOM - przycisk:
 `embed:forwarding-refs/fancy-button-simple.js`
 
-React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much.
+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ć 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. 
 
-Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations.
+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. 
 
-**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.**
+**Przekazywanie referencji jest opcjonalną funkcjonalnością, która pozwala komponentom wziąć referencję do nich przekazaną i "podać dalej" do swojego dziecka.**
 
-In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders:
+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`
 
-This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly.
+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.
 
-Here is a step-by-step explanation of what happens in the above example:
+Oto krok po kroku - co wydarzyło się w przykładzie powyżej:
 
-1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable.
-1. We pass our `ref` down to `<FancyButton ref={ref}>` by specifying it as a JSX attribute.
-1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument.
-1. We forward this `ref` argument down to `<button ref={ref}>` by specifying it as a JSX attribute.
-1. When the ref is attached, `ref.current` will point to the `<button>` DOM node.
+1. Tworzymy [referencję Reactową](/docs/refs-and-the-dom.html) wołając `React.createRef` i przypisujemy ją do stałej `ref`.
+1. Przekazujemy `ref` do `<FancyButton ref={ref}>` przypisując ją do atrybutu JSX.
+1. React przekazuje `ref` do funkcji `(props, ref) => ...` jako drugi argument wewnątrz `forwardRef`.
+1. Podajemy argument `ref` dalej do `<button ref={ref}>` przypisując go do atrybutu JSX.
+1. Gdy referencja jest zamontowana, `ref.current` będzie wskazywać na element DOM `<button>`.
 
->Note
+>Uwaga
 >
->The second `ref` argument only exists when you define a component with `React.forwardRef` call. Regular function or class components don't receive the `ref` argument, and ref is not available in props either.
+>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").
 >
->Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too.
+>Przekazywanie referencji nie jest ograniczone do elementów drzewa DOM. Możesz także przekazywać referencje do instancji komponentów klasowych.
 
-## Note for component library maintainers {#note-for-component-library-maintainers}
+## Uwaga dla autorów bibliotek komonentów {#note-for-component-library-maintainers}
 
-**When you start using `forwardRef` in a component library, you should treat it as a breaking change and release a new major version of your library.** This is because your library likely has an observably different behavior (such as what refs get assigned to, and what types are exported), and this can break apps and other libraries that depend on the old behavior.
+**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.
 
-Conditionally applying `React.forwardRef` when it exists is also not recommended for the same reasons: it changes how your library behaves and can break your users' apps when they upgrade React itself.
+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.  
 
-## Forwarding refs in higher-order components {#forwarding-refs-in-higher-order-components}
+## Przekazywanie referencji w Komponentach Wyższego Rzędu {#forwarding-refs-in-higher-order-components}
+
+Omawiana technika może okazać się wyjątkowo przydatna w [Komponentach Wyższego Rzędu](/docs/higher-order-components.html) (KWR; ang. "Higher Order Components" lub "HOC"). Zacznijmy od przykładu KWR, który wypisuje w konsoli wszystkie właściwości komponentu:
 
-This technique can also be particularly useful with [higher-order components](/docs/higher-order-components.html) (also known as HOCs). Let's start with an example HOC that logs component props to the console:
 `embed:forwarding-refs/log-props-before.js`
 
-The "logProps" HOC passes all `props` through to the component it wraps, so the rendered output will be the same. For example, we can use this HOC to log all props that get passed to our "fancy button" component:
+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`
 
-There is one caveat to the above example: refs will not get passed through. That's because `ref` is not a prop. Like `key`, it's handled differently by React. If you add a ref to a HOC, the ref will refer to the outermost container component, not the wrapped component.
+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. 
 
-This means that refs intended for our `FancyButton` component will actually be attached to the `LogProps` component:
+Oznacza to, ze referencje przenzaczone dla naszego komponentu `FancyButton` będą w praktyce przyczepione do komponentu `LogProps`.  
 `embed:forwarding-refs/fancy-button-ref.js`
 
-Fortunately, we can explicitly forward refs to the inner `FancyButton` component using the `React.forwardRef` API. `React.forwardRef` accepts a render function that receives `props` and `ref` parameters and returns a React node. For example:
+Na szczęście możemy wprost przekazać referencję do wewnętrznego komponentu `FancyButton` używając API `React.forwardRef`. `React.forwardRef` przyjmuje funkcję renderującą, która otrzymuje parametry `props` oraz `ref`, a zwraca element Reactowy. Na przykład:
 `embed:forwarding-refs/log-props-after.js`
 
-## Displaying a custom name in DevTools {#displaying-a-custom-name-in-devtools}
+## Wyświetlanie własnej nazwy w narzędziach deweloperskich {#displaying-a-custom-name-in-devtools}
 
-`React.forwardRef` accepts a render function. React DevTools uses this function to determine what to display for the ref forwarding component.
+`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ę.
 
-For example, the following component will appear as "*ForwardRef*" in the DevTools:
+Przykładowo, następujący komponent w narzędziach deweloperskich wyświetli się jako "*ForwardRef*":
 
 `embed:forwarding-refs/wrapped-component.js`
 
-If you name the render function, DevTools will also include its name (e.g. "*ForwardRef(myFunction)*"):
+Jeśli nazwiesz funkcję renderującą, narzędzia deweloperskie uwzględnią tę nazwę (np. "*ForwardRef(myFunction)*"):
 
 `embed:forwarding-refs/wrapped-component-with-function-name.js`
 
-You can even set the function's `displayName` property to include the component you're wrapping:
+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} />;