Skip to content

Commit f281e13

Browse files
authored
Apply suggestions from code review
1 parent a89cb37 commit f281e13

File tree

3 files changed

+18
-18
lines changed

3 files changed

+18
-18
lines changed

content/docs/forwarding-refs.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,54 +20,54 @@ Jest to korzystne, gdyż zapobiega sytuacji, w której komponenty są za bardzo
2020

2121
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.
2222

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ć dalej" do swojego dziecka.**
2424

2525
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:
2626

2727
`embed:forwarding-refs/fancy-button-simple-ref.js`
2828

29-
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.
3030

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:
3232

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`.
3434
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.
3636
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>`.
3838

3939
>Uwaga
4040
>
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`).
4242
>
4343
>Przekazywanie referencji nie jest ograniczone do elementów drzewa DOM. Możesz także przekazywać referencje do instancji komponentów klasowych.
4444
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}
4646

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.
4848

4949
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.
5050

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}
5252

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, 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:
5454

5555
`embed:forwarding-refs/log-props-before.js`
5656

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`:
5858
`embed:forwarding-refs/fancy-button.js`
5959

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.
6161

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`.
6363
`embed:forwarding-refs/fancy-button-ref.js`
6464

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:
6666
`embed:forwarding-refs/log-props-after.js`
6767

6868
## Wyświetlanie własnej nazwy w narzędziach deweloperskich {#displaying-a-custom-name-in-devtools}
6969

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ę.
7171

7272
Przykładowo, następujący komponent w narzędziach deweloperskich wyświetli się jako "*ForwardRef*":
7373

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import FancyButton from './FancyButton';
33
// highlight-next-line
44
const ref = React.createRef();
55

6-
// Komponent FancyButton, który zaimportowaliśmy jest tak naprawdę KWRem LogProps.
6+
// Komponent FancyButton, który zaimportowaliśmy, jest tak naprawdę KWR-em LogProps.
77
// Mimo że wyświetlony rezultat będzie taki sam,
88
// nasza referencja będzie wskazywała na LogProps zamiast na komponent FancyButton!
99
// Oznacza to, że nie możemy wywołać np. metody ref.current.focus()

examples/forwarding-refs/fancy-button.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ class FancyButton extends React.Component {
66
// ...
77
}
88

9-
// Zamiast FancyButton, exportujemy LogProps.
9+
// Zamiast FancyButton eksportujemy LogProps.
1010
// Jednak wyrenderowany zostanie FancyButton.
1111
// highlight-next-line
1212
export default logProps(FancyButton);

0 commit comments

Comments
 (0)