logo

TechCodeview

React Refs

Refs je okrajšava, ki se uporablja za reference v Reactu. Podobno je ključi v Reactu. Je atribut, ki omogoča shranjevanje sklicevanja na določena vozlišča DOM ali elemente React. Zagotavlja način za dostop do vozlišč React DOM ali elementov React in kako z njim komunicirati. Uporablja se, ko želimo spremeniti vrednost podrejene komponente, ne da bi uporabili props.

Kdaj uporabiti Ref

Sklici se lahko uporabljajo v naslednjih primerih:

  • Ko potrebujemo meritve DOM, kot je upravljanje fokusa, izbira besedila ali predvajanje medijev.
  • Uporablja se pri proženju imperativnih animacij.
  • Pri integraciji s knjižnicami DOM drugih proizvajalcev.
  • Uporablja se lahko tudi kot pri povratnih klicih.

Kdaj ne uporabiti Ref

  • Njegovi uporabi se je treba izogibati za vse, kar je mogoče storiti deklarativno . Na primer, namesto uporabe odprto() in zapri() metode na komponenti Dialog, morate posredovati je odprto podpirati to.
  • Izogibati se morate pretirani uporabi Ref.

Kako ustvariti Ref

V Reactu lahko Refs ustvarite z uporabo React.createRef() . Elementom React ga je mogoče dodeliti prek ref atribut. Običajno je dodeljena lastnosti primerka, ko je komponenta ustvarjena, nato pa se lahko nanjo sklicujete v celotni komponenti.

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

Kako dostopati do Ref

Ko je v Reactu ref posredovan elementu znotraj metode upodabljanja, je do sklica na vozlišče mogoče dostopati prek trenutnega atributa ref.

 const node = this.callRef.current;

Refs trenutne lastnosti

Vrednost ref se razlikuje glede na vrsto vozlišča:

  • Ko je atribut ref uporabljen v elementu HTML, je ref, ustvarjen z React.createRef() kot svoj prejme osnovni element DOM trenutno premoženje.
  • Če je atribut ref uporabljen na komponenti razreda po meri, potem objekt ref prejme nameščen primerek komponente kot njeno trenutno lastnost.
  • Atributa ref ni mogoče uporabiti na funkcijske komponente ker nimajo primerkov.

Dodajte Ref elementom DOM

V spodnjem primeru dodajamo ref za shranjevanje sklica na vozlišče ali element 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;

Izhod

React Refs

Dodajte Ref komponentam razreda

V spodnjem primeru dodajamo ref za shranjevanje sklica na komponento razreda.

Primer

 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;

Izhod

React Refs

Ref

V React obstaja še en način za uporabo refs, ki se imenuje ' povratni klic ' in daje več nadzora, ko so sodniki set in nenastavljeno . Namesto ustvarjanja referenc z metodo createRef(), React omogoča način ustvarjanja referenc s posredovanjem funkcije povratnega klica atributu ref komponente. Videti je kot spodnja koda.

 this.callRefInput = element} /&gt;

Funkcija povratnega klica se uporablja za shranjevanje sklica na vozlišče DOM v lastnosti primerka in je dostopna drugje. Do njega lahko dostopate kot spodaj:

 this.callRefInput.value

Spodnji primer pomaga razumeti delovanje povratnih klicev.

 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;

V zgornjem primeru bo React poklical povratni klic 'ref', da shrani sklic na vhodni element DOM, ko komponenta nosilci , in ko komponento odklopi , pokličite z nič . Sodniki so vedno aktualen pred componentDidMount oz componentDidUpdate požari. Prehod referenc povratnega klica med komponentami je enak, kot lahko delate z referencami objektov, ki so ustvarjeni z React.createRef().

Izhod

React Refs

Posredovanje Ref z ene komponente na drugo komponento

Ref forwarding je tehnika, ki se uporablja za posredovanje a ref prek komponente v eno od njenih podrejenih komponent. Izvede se lahko z uporabo React.forwardRef() metoda. Ta tehnika je še posebej uporabna pri komponente višjega reda in se posebej uporablja v knjižnicah komponent za večkratno uporabo. Najpogostejši primer je podan spodaj.

Primer

 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;

V zgornjem primeru je komponenta TextInput ki ima podrejenega kot vnosno polje. Zdaj, da posredujete ali posredujete ref do vnosa, najprej ustvarite ref in nato posredujte svoj ref navzdol . Po tem React posreduje ref naprejRef deluje kot drugi argument. Nato posredujemo ta ref argument navzdol . Zdaj lahko do vrednosti vozlišča DOM dostopate na inputRef.current .

Reagiraj z useRef()

Predstavljen je v Reagiraj 16.7 in zgornja različica. Pomaga pridobiti dostop do vozlišča ali elementa DOM, nato pa lahko komuniciramo s tem vozliščem ali elementom DOM, kot je fokusiranje vhodnega elementa ali dostop do vrednosti vhodnega elementa. Vrne predmet ref, katerega .trenutno lastnost, inicializirana na posredovan argument. Vrnjeni objekt ostane ves čas trajanja komponente.

Sintaksa

 const refContainer = useRef(initialValue);

Primer

V spodnji kodi je useRef je funkcija, ki se dodeli spremenljivki, vnosRef in nato priložen atributu z imenom ref znotraj elementa HTML, na katerega se želite sklicevati.

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