logo

TechCodeview

Reageer ref

Refs is de afkorting die wordt gebruikt voor referenties in Reageer. Het lijkt op sleutels in Reageer. Het is een attribuut dat het mogelijk maakt om een ​​verwijzing naar bepaalde DOM-knooppunten of React-elementen op te slaan. Het biedt een manier om toegang te krijgen tot React DOM-knooppunten of React-elementen en hoe u ermee kunt communiceren. Het wordt gebruikt als we de waarde van een onderliggende component willen wijzigen, zonder gebruik te maken van rekwisieten.

Wanneer moet u ref. gebruiken?

Referenties kunnen in de volgende gevallen worden gebruikt:

  • Wanneer we DOM-metingen nodig hebben, zoals het beheren van de focus, tekstselectie of het afspelen van media.
  • Het wordt gebruikt bij het activeren van imperatieve animaties.
  • Bij integratie met DOM-bibliotheken van derden.
  • Het kan ook worden gebruikt als terugbelverzoek.

Wanneer niet gebruiken Ref

  • Het gebruik ervan moet worden vermeden voor alles wat gedaan kan worden declaratief . In plaats van gebruiken bijvoorbeeld open() En dichtbij() methoden op een Dialog-component, moet u een is geopend prop er aan.
  • U moet overmatig gebruik van de Refs vermijden.

Hoe u referenties kunt maken

In React kunnen referenties worden gemaakt met behulp van Reageer.createRef() . Het kan worden toegewezen aan React-elementen via de ref attribuut. Deze wordt gewoonlijk toegewezen aan een instantie-eigenschap wanneer een component wordt gemaakt, en er kan vervolgens in de hele component naar worden verwezen.

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

Toegang krijgen tot ref

Wanneer in React een ref wordt doorgegeven aan een element binnen de rendermethode, is een verwijzing naar het knooppunt toegankelijk via het huidige attribuut van de ref.

 const node = this.callRef.current;

Verwijst naar huidige eigenschappen

De ref-waarde verschilt afhankelijk van het type knooppunt:

  • Wanneer het ref-attribuut wordt gebruikt in een HTML-element, wordt de ref gemaakt met Reageer.createRef() ontvangt het onderliggende DOM-element als zijn huidig eigendom.
  • Als het ref-attribuut wordt gebruikt voor een aangepaste klassecomponent, ontvangt ref-object de gemonteerd exemplaar van de component als zijn huidige eigenschap.
  • Het ref-attribuut kan niet worden gebruikt op functionele componenten omdat ze geen exemplaren hebben.

Voeg Ref toe aan DOM-elementen

In het onderstaande voorbeeld voegen we een ref toe om de verwijzing naar een DOM-knooppunt of -element op te slaan.

 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;

Uitvoer

Reageer ref

Voeg Ref toe aan klassecomponenten

In het onderstaande voorbeeld voegen we een ref toe om de verwijzing naar een klassecomponent op te slaan.

Voorbeeld

 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;

Uitvoer

Reageer ref

Terugbelreferenties

In reactie hierop is er een andere manier om refs te gebruiken, namelijk ' terugbel ref ' en het geeft meer controle als de scheidsrechters aanwezig zijn set En uitgeschakeld . In plaats van refs te creëren met de createRef() methode, biedt React een manier om refs te creëren door een callback-functie door te geven aan het ref-attribuut van een component. Het lijkt op de onderstaande code.

 this.callRefInput = element} /&gt;

De callback-functie wordt gebruikt om een ​​verwijzing naar het DOM-knooppunt op te slaan in een instance-eigenschap en is elders toegankelijk. Het is toegankelijk zoals hieronder:

 this.callRefInput.value

Het onderstaande voorbeeld helpt de werking van callback-referenties te begrijpen.

 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;

In het bovenstaande voorbeeld zal React de 'ref'-callback aanroepen om de verwijzing naar het invoer-DOM-element op te slaan wanneer de component monteert en wanneer het onderdeel ontkoppelt , noem het met nul . Refs zijn altijd actueel vóór de componentDidMount of componentDidUpdate branden. De callback-referenties die tussen componenten worden doorgegeven, zijn hetzelfde als waarmee u kunt werken met objectreferenties, die zijn gemaakt met React.createRef().

Uitvoer

Reageer ref

Ref doorsturen van het ene onderdeel naar het andere onderdeel

Ref forwarding is een techniek die wordt gebruikt voor het doorgeven van een ref via een component naar een van de onderliggende componenten. Het kan worden uitgevoerd door gebruik te maken van de Reageer.forwardRef() methode. Deze techniek is vooral handig bij componenten van hogere orde en speciaal gebruikt in herbruikbare componentenbibliotheken. Het meest voorkomende voorbeeld vindt u hieronder.

Voorbeeld

 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;

In het bovenstaande voorbeeld is er een component Tekst invoer met een kind als invoerveld. Nu, om het door te geven of door te sturen ref tot aan de invoer, maak eerst een ref aan en geef vervolgens uw ref door aan . Daarna stuurt React de ref door naar de vooruitRef fungeren als tweede argument. Vervolgens sturen we dit ref-argument door naar . Nu is de waarde van het DOM-knooppunt toegankelijk via inputRef.stroom .

Reageer met useRef()

Het wordt geïntroduceerd Reageren 16.7 en bovenstaande versie. Het helpt om toegang te krijgen tot het DOM-knooppunt of -element, en dan kunnen we communiceren met dat DOM-knooppunt of -element, zoals het focusseren van het invoerelement of toegang krijgen tot de waarde van het invoerelement. Het retourneert het ref-object waarvan .huidig eigenschap geïnitialiseerd op het doorgegeven argument. Het geretourneerde object blijft bestaan ​​gedurende de levensduur van het onderdeel.

Syntaxis

 const refContainer = useRef(initialValue);

Voorbeeld

In de onderstaande code, gebruikRef is een functie die aan een variabele wordt toegewezen, invoerRef en vervolgens gekoppeld aan een attribuut met de naam ref in het HTML-element waarnaar u wilt verwijzen.

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