logo

TechCodeview

Reaguj ref

Refs to skrót używany do Bibliografia w Reagowaniu. To jest podobne do Klucze w Reagowaniu. Jest to atrybut pozwalający na przechowywanie referencji do poszczególnych węzłów DOM lub elementów React. Zapewnia dostęp do węzłów React DOM lub elementów React i umożliwia interakcję z nimi. Używa się go, gdy chcemy zmienić wartość komponentu potomnego bez użycia rekwizytów.

Kiedy używać ref

Ref. można zastosować w następujących przypadkach:

  • Gdy potrzebujemy pomiarów DOM, takich jak zarządzanie fokusem, zaznaczanie tekstu lub odtwarzanie multimediów.
  • Służy do wyzwalania animacji imperatywnych.
  • Podczas integracji z bibliotekami DOM innych firm.
  • Można go również używać jak w wywołaniach zwrotnych.

Kiedy nie stosować ref

  • Należy unikać jego stosowania we wszystkim, co można zrobić deklaratywnie . Na przykład zamiast używać otwarty() I zamknąć() metod w komponencie Dialog, musisz przekazać an jest otwarte podeprzyj to.
  • Powinieneś unikać nadmiernego używania Refs.

Jak utworzyć ref

W React refs można tworzyć za pomocą Reaguj.utwórzRef() . Można go przypisać do elementów React poprzez ref atrybut. Zwykle jest przypisywany do właściwości wystąpienia podczas tworzenia komponentu, a następnie można się do niego odwoływać w całym komponencie.

 class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } }

Jak uzyskać dostęp do Ref

W React, gdy ref jest przekazywany do elementu wewnątrz metody render, dostęp do referencji do węzła można uzyskać poprzez bieżący atrybut ref.

 const node = this.callRef.current;

Odnosi się do bieżących właściwości

Wartość ref różni się w zależności od typu węzła:

  • Kiedy atrybut ref jest używany w elemencie HTML, ref utworzony za pomocą Reaguj.utwórzRef() otrzymuje bazowy element DOM jako swój aktualny nieruchomość.
  • Jeśli atrybut ref jest używany w komponencie klasy niestandardowej, wówczas obiekt ref otrzymuje zamontowane instancję komponentu jako jego bieżącą właściwość.
  • Nie można użyć atrybutu ref komponenty funkcyjne bo nie mają instancji.

Dodaj Ref do elementów DOM

W poniższym przykładzie dodajemy ref, aby przechowywać odwołanie do węzła lub elementu DOM.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); this.addingRefInput = this.addingRefInput.bind(this); } addingRefInput() { this.callRef.current.focus(); } render() { return ( <h2>Adding Ref to DOM element</h2> ); } } export default App;

Wyjście

Reaguj ref

Dodaj Ref do komponentów klasy

W poniższym przykładzie dodajemy ref, aby przechowywać odwołanie do komponentu klasy.

Przykład

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; function CustomInput(props) { let callRefInput = React.createRef(); function handleClick() { callRefInput.current.focus(); } return ( <h2>Adding Ref to Class Component</h2> ); } class App extends React.Component { constructor(props) { super(props); this.callRefInput = React.createRef(); } focusRefInput() { this.callRefInput.current.focus(); } render() { return ( ); } } export default App;

Wyjście

Reaguj ref

Referencje zwrotne

W reakcji istnieje inny sposób użycia referencji, zwany „ referencje oddzwonienia ' i daje większą kontrolę, gdy sędziowie są ustawić I nieoprawny . Zamiast tworzyć referencje metodą createRef(), React umożliwia tworzenie referencji poprzez przekazanie funkcji wywołania zwrotnego do atrybutu ref komponentu. Wygląda jak poniższy kod.

 this.callRefInput = element} /&gt;

Funkcja wywołania zwrotnego służy do przechowywania odniesienia do węzła DOM we właściwości instancji i można uzyskać do niej dostęp w innym miejscu. Można uzyskać do niego dostęp w następujący sposób:

 this.callRefInput.value

Poniższy przykład pomaga zrozumieć działanie referencji wywołania zwrotnego.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element =&gt; { this.callRefInput = element; }; this.focusRefInput = () =&gt; { //Focus the input using the raw DOM API if (this.callRefInput) this.callRefInput.focus(); }; } componentDidMount() { //autofocus of the input on mount this.focusRefInput(); } render() { return ( <h2>Callback Refs Example</h2> ); } } export default App;

W powyższym przykładzie React wywoła wywołanie zwrotne „ref”, aby zapisać odwołanie do wejściowego elementu DOM, gdy komponent mocowania i kiedy komponent odmontowuje , zadzwoń do niego zero . Ref. są zawsze aktualny przed komponentDidMount Lub komponentDidUpdate pożary. Przekazywanie referencji wywołania zwrotnego pomiędzy komponentami jest takie samo, jak w przypadku referencji obiektów, które są tworzone za pomocą React.createRef().

Wyjście

Reaguj ref

Przekazywanie referencji z jednego komponentu do innego komponentu

Przekazywanie refów to technika używana do przekazywania a ref poprzez komponent do jednego z jego komponentów podrzędnych. Można tego dokonać korzystając z tzw Reaguj do przoduRef() metoda. Ta technika jest szczególnie przydatna w przypadku komponenty wyższego rzędu i specjalnie używane w bibliotekach komponentów wielokrotnego użytku. Najczęstszy przykład podano poniżej.

Przykład

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; const TextInput = React.forwardRef((props, ref) =&gt; ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e =&gt; { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}&gt; Submit ); } } export default App;

W powyższym przykładzie występuje komponent Wprowadzanie tekstu który ma dziecko jako pole wejściowe. Teraz, aby przekazać lub przesłać dalej ref aż do wejścia, najpierw utwórz ref, a następnie przekaż go do . Następnie React przekazuje ref do do przoduRef pełnić funkcję drugiego argumentu. Następnie przekazujemy ten argument ref do . Teraz dostęp do wartości węzła DOM można uzyskać pod adresem wejściowy prąd zad .

Reaguj za pomocą useRef()

Jest wprowadzony w Reaguj 16.7 i wyższa wersja. Pomaga uzyskać dostęp do węzła lub elementu DOM, a następnie możemy wchodzić w interakcję z tym węzłem lub elementem DOM, na przykład skupiając element wejściowy lub uzyskując dostęp do wartości elementu wejściowego. Zwraca obiekt ref którego .aktualny właściwość zainicjowana do przekazanego argumentu. Zwrócony obiekt będzie zachowywany przez cały okres istnienia komponentu.

Składnia

 const refContainer = useRef(initialValue);

Przykład

W poniższym kodzie użyjRef jest funkcją przypisaną do zmiennej, wejścieRef , a następnie dołączony do atrybutu o nazwie ref wewnątrz elementu HTML, do którego chcesz się odwołać.

 function useRefExample() { const inputRef= useRef(null); const onButtonClick = () =&gt; { inputRef.current.focus(); }; return ( Submit ); }