Refs ist die Abkürzung für Verweise in Reagieren. Das ist vergleichbar mit Schlüssel in Reagieren. Es handelt sich um ein Attribut, das es ermöglicht, einen Verweis auf bestimmte DOM-Knoten oder React-Elemente zu speichern. Es bietet eine Möglichkeit, auf React-DOM-Knoten oder React-Elemente zuzugreifen und mit ihnen zu interagieren. Es wird verwendet, wenn wir den Wert einer untergeordneten Komponente ändern möchten, ohne Requisiten zu verwenden.
Wann sollten Refs verwendet werden?
Refs können in den folgenden Fällen verwendet werden:
- Wenn wir DOM-Messungen wie Fokusverwaltung, Textauswahl oder Medienwiedergabe benötigen.
- Es wird zum Auslösen zwingender Animationen verwendet.
- Bei der Integration mit DOM-Bibliotheken von Drittanbietern.
- Es kann auch wie bei Rückrufen verwendet werden.
Wann sollte Refs nicht verwendet werden?
- Seine Verwendung sollte nach Möglichkeit vermieden werden deklarativ . Zum Beispiel statt zu verwenden offen() Und schließen() Um Methoden für eine Dialogkomponente zu verwenden, müssen Sie eine übergeben ist offen Stütze dazu.
- Sie sollten eine übermäßige Verwendung der Refs vermeiden.
So erstellen Sie Refs
In React können Refs mithilfe von erstellt werden React.createRef() . Es kann React-Elementen über zugewiesen werden ref Attribut. Beim Erstellen einer Komponente wird es üblicherweise einer Instanzeigenschaft zugewiesen und kann dann in der gesamten Komponente referenziert werden.
class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } } So greifen Sie auf Refs zu
Wenn in React ein Verweis an ein Element innerhalb der Render-Methode übergeben wird, kann über das aktuelle Attribut des Verweises auf einen Verweis auf den Knoten zugegriffen werden.
const node = this.callRef.current;
Verweist auf aktuelle Eigenschaften
Der Ref-Wert unterscheidet sich je nach Knotentyp:
- Wenn das ref-Attribut in einem HTML-Element verwendet wird, wird der ref mit erstellt React.createRef() erhält das zugrunde liegende DOM-Element als sein aktuell Eigentum.
- Wenn das Ref-Attribut für eine benutzerdefinierte Klassenkomponente verwendet wird, erhält das Ref-Objekt das montiert Instanz der Komponente als ihre aktuelle Eigenschaft.
- Das ref-Attribut kann nicht verwendet werden Funktionskomponenten weil sie keine Instanzen haben.
Ref zu DOM-Elementen hinzufügen
Im folgenden Beispiel fügen wir einen Verweis hinzu, um den Verweis auf einen DOM-Knoten oder ein DOM-Element zu speichern.
import React, { Component } from 'react'; import { render } from 'react-dom'; 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; Ausgabe
Ref zu Klassenkomponenten hinzufügen
Im folgenden Beispiel fügen wir einen Verweis hinzu, um den Verweis auf eine Klassenkomponente zu speichern.
Beispiel
import React, { Component } from 'react'; import { render } from 'react-dom'; 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; Ausgabe
Rückrufreferenten
In React gibt es eine andere Möglichkeit, Refs zu verwenden, die „ Rückrufreferenten ' und es gibt mehr Kontrolle, wenn die Schiedsrichter sind Satz Und nicht gesetzt . Anstatt Refs mit der Methode createRef() zu erstellen, bietet React die Möglichkeit, Refs zu erstellen, indem eine Callback-Funktion an das ref-Attribut einer Komponente übergeben wird. Es sieht aus wie der folgende Code.
this.callRefInput = element} />
Mit der Callback-Funktion wird ein Verweis auf den DOM-Knoten in einer Instanzeigenschaft gespeichert und kann an anderer Stelle abgerufen werden. Es kann wie folgt aufgerufen werden:
this.callRefInput.value
Das folgende Beispiel hilft, die Funktionsweise von Callback-Referenzen zu verstehen.
import React, { Component } from 'react'; import { render } from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element => { this.callRefInput = element; }; this.focusRefInput = () => { //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; Im obigen Beispiel ruft React den Rückruf „ref“ auf, um den Verweis auf das Eingabe-DOM-Element zu speichern, wenn die Komponente Anschlüsse , und wenn die Komponente steigt aus , nenne es mit Null . Schiedsrichter sind immer auf dem Laufenden Vor dem ComponentDidMount oder ComponentDidUpdate Brände. Die Weitergabe von Callback-Refs zwischen Komponenten ist die gleiche wie bei der Arbeit mit Objekt-Refs, die mit React.createRef() erstellt werden.
Ausgabe
Ref von einer Komponente an eine andere weiterleiten
Ref-Weiterleitung ist eine Technik, die zum Übergeben von a verwendet wird ref über eine Komponente zu einer ihrer untergeordneten Komponenten. Dies kann mithilfe von durchgeführt werden React.forwardRef() Methode. Diese Technik ist besonders nützlich bei Komponenten höherer Ordnung und speziell in wiederverwendbaren Komponentenbibliotheken verwendet. Das häufigste Beispiel ist unten aufgeführt.
Beispiel
import React, { Component } from 'react'; import { render } from 'react-dom'; const TextInput = React.forwardRef((props, ref) => ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e => { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}> Submit ); } } export default App; Im obigen Beispiel gibt es eine Komponente Text Eingabe das ein untergeordnetes Feld als Eingabefeld hat. Nun, um das weiterzugeben oder weiterzuleiten ref Bis zur Eingabe erstellen Sie zunächst eine Referenz und übergeben diese dann an . Danach leitet React den Ref an den weiter vorwärtsRef als zweites Argument fungieren. Als nächstes leiten wir dieses ref-Argument weiter an . Jetzt kann auf den Wert des DOM-Knotens zugegriffen werden inputRef.current .
Reagieren Sie mit useRef()
Es wird eingeführt in Reagieren 16.7 und höher Version. Es ist hilfreich, auf den DOM-Knoten oder das DOM-Element zuzugreifen, und dann können wir mit diesem DOM-Knoten oder -Element interagieren, indem wir beispielsweise das Eingabeelement fokussieren oder auf den Eingabeelementwert zugreifen. Es gibt das Referenzobjekt zurück, dessen .aktuell Eigenschaft, die mit dem übergebenen Argument initialisiert wird. Das zurückgegebene Objekt bleibt für die gesamte Lebensdauer der Komponente bestehen.
Syntax
const refContainer = useRef(initialValue);
Beispiel
Im folgenden Code: useRef ist eine Funktion, die einer Variablen zugewiesen wird, EingabeRef und dann an ein Attribut namens ref innerhalb des HTML-Elements angehängt, auf das Sie verweisen möchten.
function useRefExample() { const inputRef= useRef(null); const onButtonClick = () => { inputRef.current.focus(); }; return ( Submit ); }