diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3318d8499..0d9f69a61 100644 --- a/content/docs/forwarding-refs.md +++ b/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, +jednak może okazać się przydatne w niektórych przypadkach, zwłaszcza w bibliotekach udostępniających uniwersalne komponenty. +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 komponent `FancyButton`, 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 związku z tym, bezpośredni dostęp do ich DOM może okazać się konieczy, aby obsłużyć np. 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ąć przekazaną do nich referencję i "podać ją 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 przekazać 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 elementu `button` znajdującego się wewnątrz. 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 wyjaśnienie krok po kroku, opisujące, 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 `` 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 ` )); -// 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(); Click me!; diff --git a/examples/forwarding-refs/fancy-button.js b/examples/forwarding-refs/fancy-button.js index 9dcd13e16..d02a7961f 100644 --- a/examples/forwarding-refs/fancy-button.js +++ b/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 eksportujemy LogProps. +// Jednak wyrenderowany zostanie FancyButton. // highlight-next-line export default logProps(FancyButton); diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js index a603bd697..7768c5d7d 100644 --- a/examples/forwarding-refs/log-props-after.js +++ b/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 ; } } - // 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 zostać przypisany do komponentu wewnątrz. // highlight-range{1-3} return React.forwardRef((props, ref) => { return ;