logo

TechCodeview

Reaguoti Refs

Refs yra trumpinys, naudojamas nuorodos Reakcijoje. Jis panašus į raktai Reakcijoje. Tai atributas, leidžiantis išsaugoti nuorodą į tam tikrus DOM mazgus arba React elementus. Tai suteikia galimybę pasiekti „React DOM“ mazgus arba „React“ elementus ir kaip su jais sąveikauti. Jis naudojamas, kai norime pakeisti antrinio komponento vertę, nenaudodami rekvizitų.

Kada naudoti nuorod

Nuorodos gali būti naudojamos šiais atvejais:

  • Kai mums reikia DOM matavimų, pvz., fokusavimo, teksto pasirinkimo ar medijos atkūrimo.
  • Jis naudojamas norint suaktyvinti būtinas animacijas.
  • Integruojant su trečiųjų šalių DOM bibliotekomis.
  • Jis taip pat gali būti naudojamas kaip atgalinių skambučių metu.

Kada nenaudoti nuorod

  • Reikėtų vengti jo naudoti viskam, ką galima padaryti deklaratyviai . Pavyzdžiui, užuot naudoję atviras() ir Uždaryti() metodus dialogo komponente, turite perduoti an atidarytas remtis prie jo.
  • Turėtumėte vengti per didelio nuorodų naudojimo.

Kaip sukurti nuorodas

Programoje „React“ nuorodas galima sukurti naudojant React.createRef() . Jį galima priskirti „React“ elementams per ref atributas. Jis paprastai priskiriamas egzemplioriaus ypatybei, kai sukuriamas komponentas, ir tada gali būti nurodyta visame komponente.

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

Kaip pasiekti Refs

React, kai nuoroda perduodama elementui atvaizdavimo metodo viduje, nuorodą į mazgą galima pasiekti naudojant dabartinį nuorodos atributą.

 const node = this.callRef.current;

Nurodo dabartines ypatybes

Nuorodos reikšmė skiriasi priklausomai nuo mazgo tipo:

  • Kai HTML elemente naudojamas ref atributas, nuoroda sukurta naudojant React.createRef() gauna pagrindinį DOM elementą kaip savo srovė nuosavybė.
  • Jei ref atributas naudojamas pasirinktiniame klasės komponente, tada ref objektas gauna a sumontuotas komponento egzempliorius kaip dabartinė jo nuosavybė.
  • Ref atributas negali būti naudojamas funkcijų komponentai nes jie neturi atvejų.

Pridėkite nuorodą prie DOM elementų

Toliau pateiktame pavyzdyje pridedame nuorodą, kad išsaugotume nuorodą į DOM mazgą arba elementą.

 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;

Išvestis

Reaguoti Refs

Pridėti nuorodą į klasės komponentus

Toliau pateiktame pavyzdyje pridedame nuorodą, kad išsaugotume nuorodą į klasės komponentą.

Pavyzdys

 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;

Išvestis

Reaguoti Refs

Atskambinimo nuorod

Reaguojant, yra dar vienas būdas naudoti nuorodas, vadinamas „ perskambinimo nuorod ir suteikia daugiau kontrolės, kai yra nuorodų rinkinys ir nenustatyta . Užuot kūrę nuorodas naudojant createRef() metodą, React leidžia sukurti nuorodas perduodant atgalinio ryšio funkciją komponento ref atributui. Tai atrodo kaip žemiau esantis kodas.

 this.callRefInput = element} /&gt;

Atgalinio skambinimo funkcija naudojama nuorodai į DOM mazgą išsaugoti egzemplioriaus ypatybėje ir ją galima pasiekti kitur. Jį galima pasiekti taip:

 this.callRefInput.value

Toliau pateiktas pavyzdys padeda suprasti atgalinio ryšio nuorodų veikimą.

 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;

Aukščiau pateiktame pavyzdyje „React“ iškvies „ref“ atgalinį skambutį, kad išsaugotų nuorodą į įvesties DOM elementą, kai komponentas stovai , o kai komponentas atsikabina , vadink su nulinis . Nuorodos visada yra naujausia prieš komponentasDidMount arba ComponentDidUpdate gaisrai. Atšaukimo nuorodų perdavimas tarp komponentų yra toks pat, kaip galite dirbti su objekto nuorodomis, kurios sukuriamos naudojant React.createRef().

Išvestis

Reaguoti Refs

Ref persiuntimas iš vieno komponento į kitą

Nuorodų persiuntimas yra technika, naudojama perduoti a ref per komponentą į vieną iš antrinių komponentų. Tai galima atlikti naudojant React.forwardRef() metodas. Ši technika ypač naudinga su aukštesnės eilės komponentai ir specialiai naudojamas daugkartinio naudojimo komponentų bibliotekose. Dažniausias pavyzdys pateikiamas žemiau.

Pavyzdys

 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;

Aukščiau pateiktame pavyzdyje yra komponentas Teksto įvestis kurios įvesties lauke yra vaikas. Dabar, norėdami perduoti arba perduoti ref iki įvesties, pirmiausia sukurkite ref, o tada perduokite savo ref . Po to „React“ persiunčia nuorodą į pirmynRef veikia kaip antrasis argumentas. Toliau šį nuorodos argumentą perduodame iki . Dabar DOM mazgo vertę galima pasiekti adresu inputRef.current .

Reaguoti su useRef()

Jis įvedamas į Reaguoti 16.7 ir aukščiau versija. Tai padeda pasiekti DOM mazgą arba elementą, tada galime sąveikauti su tuo DOM mazgu ar elementu, pvz., fokusuoti įvesties elementą arba pasiekti įvesties elemento vertę. Jis grąžina ref objektą, kurio .dabartinė savybė, inicijuota į perduotą argumentą. Grąžintas objektas išlieka visą komponento gyvavimo laiką.

Sintaksė

 const refContainer = useRef(initialValue);

Pavyzdys

Žemiau esančiame kode, useRef yra funkcija, kuri priskiriama kintamajam, inputRef , o tada pridedamas prie atributo, vadinamo ref, HTML elemente, kuriame norite nurodyti.

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