logo

TechCodeview

Reagovať Ref

Refs je skratka používaná pre referencie v React. Je to podobné ako kľúče v React. Je to atribút, ktorý umožňuje uložiť referenciu na konkrétne uzly DOM alebo prvky React. Poskytuje spôsob prístupu k React DOM uzlom alebo prvkom React a ako s nimi interagovať. Používa sa, keď chceme zmeniť hodnotu podriadeného komponentu bez použitia rekvizít.

Kedy použiť Ref

Referencie možno použiť v nasledujúcich prípadoch:

  • Keď potrebujeme merania DOM, ako je riadenie zaostrenia, výber textu alebo prehrávanie médií.
  • Používa sa pri spúšťaní imperatívnych animácií.
  • Pri integrácii s knižnicami DOM tretích strán.
  • Dá sa použiť aj ako pri spätných volaniach.

Kedy nepoužívať Ref

  • Jeho použitiu sa treba vyhnúť pri všetkom, čo sa dá urobiť deklaratívne . Napríklad namiesto použitia OTVORENÉ() a Zavrieť() metódy na komponente Dialog, musíte odovzdať je otvorené oporu k tomu.
  • Mali by ste sa vyhnúť nadmernému používaniu Ref.

Ako vytvoriť Ref

V React môžu byť odkazy vytvorené pomocou React.createRef() . Môže byť priradený k prvkom React cez ref atribút. Bežne sa priraďuje k vlastnosti inštancie pri vytváraní komponentu a potom sa naň môže odkazovať v rámci komponentu.

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

Ako získať prístup k Ref

V Reacte, keď je odkaz odovzdaný prvku v metóde vykresľovania, odkaz na uzol môže byť prístupný cez aktuálny atribút odkazu.

 const node = this.callRef.current;

Odkazuje na aktuálne vlastnosti

Referenčná hodnota sa líši v závislosti od typu uzla:

  • Keď sa v elemente HTML použije atribút ref, ref sa vytvorí pomocou React.createRef() prijíma základný prvok DOM ako svoj prúd nehnuteľnosť.
  • Ak je atribút ref použitý na komponente vlastnej triedy, potom objekt ref dostane namontované inštanciu komponentu ako jeho aktuálnu vlastnosť.
  • Atribút ref nemožno použiť na funkčné komponenty pretože nemajú inštancie.

Pridajte referenciu k prvkom DOM

V nižšie uvedenom príklade pridávame odkaz na uloženie odkazu na uzol alebo prvok 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;

Výkon

Reagovať Ref

Pridať Ref do komponentov triedy

V nižšie uvedenom príklade pridávame odkaz na uloženie odkazu na komponent triedy.

Príklad

 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;

Výkon

Reagovať Ref

Referencie spätného volania

V reakcii existuje ďalší spôsob použitia odkazov, ktorý sa nazýva „ referencie spätného volania a dáva väčšiu kontrolu, keď sú referencie nastaviť a odstaviť . Namiesto vytvárania refs metódou createRef() umožňuje React spôsob, ako vytvárať refs odovzdaním funkcie spätného volania do atribútu ref komponentu. Vyzerá to ako kód nižšie.

 this.callRefInput = element} /&gt;

Funkcia spätného volania sa používa na uloženie odkazu na uzol DOM vo vlastnosti inštancie a možno k nej pristupovať inde. Dá sa k nemu dostať takto:

 this.callRefInput.value

Nižšie uvedený príklad pomáha pochopiť fungovanie spätných odkazov.

 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;

Vo vyššie uvedenom príklade React zavolá spätné volanie „ref“ na uloženie odkazu na vstupný prvok DOM, keď komponent montuje , a keď komponent odpojí , zavolajte to pomocou nulový . Referencie sú vždy aktuálny pred komponentDidMount alebo componentDidUpdate požiarov. Prechod spätných odkazov medzi komponentmi je rovnaký, ako môžete pracovať s objektovými referenciami, ktoré sa vytvárajú pomocou React.createRef().

Výkon

Reagovať Ref

Preposielanie referencie z jedného komponentu do iného komponentu

Ref forwarding je technika, ktorá sa používa na odovzdanie a ref cez komponent na jeden z jeho podriadených komponentov. Dá sa to vykonať pomocou React.forwardRef() metóda. Táto technika je obzvlášť užitočná pri komponenty vyššieho rádu a špeciálne používané v knižniciach opakovane použiteľných komponentov. Najbežnejší príklad je uvedený nižšie.

Príklad

 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;

Vo vyššie uvedenom príklade je komponent TextInput ktoré má dieťa ako vstupné pole. Teraz prejdite alebo pošlite ďalej ref až po vstup, najprv vytvorte referenciu a potom odovzdajte svoju referenciu . Potom React prepošle referenciu na vpredRef funguje ako druhý argument. Ďalej postúpime tento argument ref . Teraz je možné získať prístup k hodnote uzla DOM vstup Ref.prúd .

Reagovať pomocou useRef()

Zavádza sa v Reagovať 16.7 a vyššie verzie. Pomáha získať prístup k uzlu alebo prvku DOM a potom môžeme interagovať s týmto uzlom alebo prvkom DOM, ako je zameranie vstupného prvku alebo prístup k hodnote vstupného prvku. Vráti objekt ref, ktorého .aktuálny vlastnosť inicializovaná na odovzdaný argument. Vrátený objekt pretrváva počas životnosti komponentu.

Syntax

 const refContainer = useRef(initialValue);

Príklad

V nižšie uvedenom kóde useRef je funkcia, ktorá sa priraďuje k premennej, vstupRef a potom sa pripojí k atribútu s názvom ref vnútri elementu HTML, na ktorý chcete odkazovať.

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