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/forwarding-refs.md
+16-16Lines changed: 16 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -20,54 +20,54 @@ Jest to korzystne, gdyż zapobiega sytuacji, w której komponenty są za bardzo
20
20
21
21
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.
22
22
23
-
**Przekazywanie referencji jest opcjonalną funkcjonalnością, która pozwala komponentom wziąć referencję do nich przekazaną i "podać dalej" do swojego dziecka.**
23
+
**Przekazywanie referencji jest opcjonalną funkcjonalnością, która pozwala komponentom wziąć przekazaną do nich referencję i "podać ją dalej" do swojego dziecka.**
24
24
25
25
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:
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.
29
+
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.
30
30
31
-
Oto krok po kroku - co wydarzyło się w przykładzie powyżej:
31
+
Oto wyjaśnienie krok po kroku, opisujące, co wydarzyło się w przykładzie powyżej:
32
32
33
-
1. Tworzymy [referencję Reactową](/docs/refs-and-the-dom.html)wołając`React.createRef` i przypisujemy ją do stałej `ref`.
33
+
1. Tworzymy [referencję reactową](/docs/refs-and-the-dom.html)wywołując`React.createRef` i przypisujemy ją do stałej `ref`.
34
34
1. Przekazujemy `ref` do `<FancyButton ref={ref}>` przypisując ją do atrybutu JSX.
35
-
1. React przekazuje `ref` do funkcji `(props, ref) => ...` jako drugi argument wewnątrz `forwardRef`.
35
+
1.Wewnątrz `forwardRef`React przekazuje `ref` do funkcji `(props, ref) => ...` jako drugi argument.
36
36
1. Podajemy argument `ref` dalej do `<button ref={ref}>` przypisując go do atrybutu JSX.
37
-
1. Gdy referencja jest zamontowana, `ref.current` będzie wskazywać na element DOM `<button>`.
37
+
1. Gdy referencja zostanie zamontowana, `ref.current` będzie wskazywać na element DOM `<button>`.
38
38
39
39
>Uwaga
40
40
>
41
-
>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").
41
+
>Drugi argument `ref` istnieje tylko, gdy definiujesz komponent przy pomocy wywołania `React.forwardRef`. Zwyczajna funkcja lub klasa nie dostanie argumentu `ref`, nawet jako jednej z właściwości (`props`).
42
42
>
43
43
>Przekazywanie referencji nie jest ograniczone do elementów drzewa DOM. Możesz także przekazywać referencje do instancji komponentów klasowych.
44
44
45
-
## Uwaga dla autorów bibliotek komonentów {#note-for-component-library-maintainers}
45
+
## Uwaga dla autorów bibliotek komponentów {#note-for-component-library-maintainers}
46
46
47
-
**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.
47
+
**Kiedy zaczniesz używać `forwardRef` w swojej bibliotece komponentów, potraktuj to jako zmianę krytyczną (ang. *breaking change*). W efekcie biblioteka powinna zostać wydana w nowej "wersji głównej" (ang. *major version*, *major release*).**Należy tak postąpić, 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.
48
48
49
49
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.
50
50
51
-
## Przekazywanie referencji w Komponentach Wyższego Rzędu {#forwarding-refs-in-higher-order-components}
51
+
## Przekazywanie referencji w komponentach wyższego rzędu {#forwarding-refs-in-higher-order-components}
52
52
53
-
Omawiana technika może okazać się wyjątkowo przydatna w [Komponentach Wyższego Rzędu](/docs/higher-order-components.html) (KWR; ang. "HigherOrder Components" lub "HOC"). Zacznijmy od przykładu KWR, który wypisuje w konsoli wszystkie właściwości komponentu:
53
+
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-a, który wypisuje w konsoli wszystkie właściwości komponentu:
54
54
55
55
`embed:forwarding-refs/log-props-before.js`
56
56
57
-
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`:
57
+
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`:
58
58
`embed:forwarding-refs/fancy-button.js`
59
59
60
-
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.
60
+
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 przez Reacta w inny sposób. Referencja będzie w tym wypadku odnosiła się do najbardziej zewnętrznego kontenera, a nie do opakowanego komponentu.
61
61
62
-
Oznacza to, ze referencje przenzaczone dla naszego komponentu `FancyButton` będą w praktyce przyczepione do komponentu`LogProps`.
62
+
Oznacza to, że referencje przeznaczone dla naszego komponentu `FancyButton` będą w praktyce wskazywać na komponent`LogProps`.
63
63
`embed:forwarding-refs/fancy-button-ref.js`
64
64
65
-
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:
65
+
Na szczęście możemy jawnie 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:
66
66
`embed:forwarding-refs/log-props-after.js`
67
67
68
68
## Wyświetlanie własnej nazwy w narzędziach deweloperskich {#displaying-a-custom-name-in-devtools}
69
69
70
-
`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ę.
70
+
`React.forwardRef` przyjmuje funkcję renderującą. Narzędzia deweloperskie Reacta (ang. *React DevTools*) używają tej funkcji do określenia, jak wyświetlać komponent, który przekazuje referencję.
71
71
72
72
Przykładowo, następujący komponent w narzędziach deweloperskich wyświetli się jako "*ForwardRef*":
0 commit comments