logo

TechCodeview

Reaģēt Refs

Atsauces ir saīsinājums, ko izmanto atsauces sadaļā Reakt. Tas ir līdzīgs atslēgas sadaļā Reakt. Tas ir atribūts, kas ļauj saglabāt atsauci uz konkrētiem DOM mezgliem vai React elementiem. Tas nodrošina veidu, kā piekļūt React DOM mezgliem vai React elementiem un kā ar tiem mijiedarboties. To izmanto, ja mēs vēlamies mainīt bērna komponenta vērtību, neizmantojot rekvizītus.

Kad izmantot atsauces

Atsauces var izmantot šādos gadījumos:

  • Kad mums ir nepieciešami DOM mērījumi, piemēram, fokusa pārvaldība, teksta atlase vai multivides atskaņošana.
  • To izmanto, lai aktivizētu obligātas animācijas.
  • Integrējot ar trešo pušu DOM bibliotēkām.
  • To var izmantot arī kā atzvanīšanu.

Kad neizmantot Refs

  • Jāizvairās no tā lietošanas visam, ko var izdarīt deklaratīvi . Piemēram, tā vietā, lai izmantotu atvērt () un aizvērt () metodes dialoga komponentā, jums ir jānokārto an ir Atvērts atbalsts tam.
  • Jums vajadzētu izvairīties no Refs pārmērīgas izmantošanas.

Kā izveidot atsauces

Programmā React Refs var izveidot, izmantojot React.createRef() . To var piešķirt React elementiem, izmantojot ref atribūts. Tas parasti tiek piešķirts gadījuma rekvizītam, kad tiek izveidots komponents, un pēc tam uz to var atsaukties visā komponentā.

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

Kā piekļūt Refs

Programmā React, kad atsauce tiek nodota elementam renderēšanas metodē, atsaucei uz mezglu var piekļūt, izmantojot atsauces pašreizējo atribūtu.

 const node = this.callRef.current;

Atsauces uz pašreizējiem īpašumiem

Atsauces vērtība atšķiras atkarībā no mezgla veida:

  • Ja HTML elementā tiek izmantots atribūts ref, atsauce tiek izveidota ar React.createRef() saņem pamatā esošo DOM elementu kā savu strāva īpašums.
  • Ja atsauces atribūts tiek izmantots pielāgotā klases komponentā, tad ref objekts saņem atribūtu uzstādīts komponenta gadījumu kā tā pašreizējo īpašumu.
  • Ref atribūtu nevar izmantot funkciju komponenti jo viņiem nav gadījumu.

Pievienojiet atsauci DOM elementiem

Tālāk esošajā piemērā mēs pievienojam atsauci, lai saglabātu atsauci uz DOM mezglu vai elementu.

 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;

Izvade

Reaģēt Refs

Pievienojiet klases komponentiem atsauci

Tālāk esošajā piemērā mēs pievienojam atsauci, lai saglabātu atsauci uz klases komponentu.

Piemērs

 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;

Izvade

Reaģēt Refs

Atzvanīšanas atsauces

Reaģējot, ir vēl viens veids, kā izmantot atsauces, ko sauc par ' atzvanīšanas refs ' un tas dod lielāku kontroli, kad ir atsauces komplekts un atiestatīts . Tā vietā, lai izveidotu atsauces ar metodi createRef(), React ļauj izveidot atsauces, nododot atzvanīšanas funkciju komponenta ref atribūtam. Tas izskatās kā zemāk redzamais kods.

 this.callRefInput = element} /&gt;

Atzvanīšanas funkcija tiek izmantota, lai saglabātu atsauci uz DOM mezglu instances īpašumā, un tai var piekļūt citur. Tam var piekļūt šādi:

 this.callRefInput.value

Tālāk sniegtais piemērs palīdz izprast atzvanīšanas atsauces darbību.

 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;

Iepriekš minētajā piemērā React izsauks “ref” atzvanu, lai saglabātu atsauci uz ievades DOM elementu, kad komponents stiprinājumi , un kad komponents nomontē , sauc to ar null . Atsauces vienmēr ir aktuāls pirms komponentsDidMount vai komponentsDidUpdate ugunsgrēki. Atzvanīšanas atsauču pārraide starp komponentiem ir tāda pati kā jūs varat strādāt ar objekta refs, kas tiek izveidota ar React.createRef().

Izvade

Reaģēt Refs

Ref pārsūtīšana no viena komponenta uz citu komponentu

Atsauces pārsūtīšana ir paņēmiens, ko izmanto, lai nokārtotu a ref caur komponentu uz vienu no tā pakārtotajiem komponentiem. To var veikt, izmantojot React.forwardRef() metodi. Šī tehnika ir īpaši noderīga ar augstākās kārtas sastāvdaļas un īpaši izmantots atkārtoti lietojamu komponentu bibliotēkās. Visizplatītākais piemērs ir sniegts zemāk.

Piemērs

 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;

Iepriekš minētajā piemērā ir komponents Teksta ievade kura ievades laukā ir bērns. Tagad, lai nodotu vai pārsūtītu ref līdz ievadei, vispirms izveidojiet atsauci un pēc tam nosūtiet savu atsauci uz . Pēc tam React pārsūta atsauci uz uz priekšuRef darbojas kā otrs arguments. Tālāk mēs pārsūtām šo atsauces argumentu uz . Tagad DOM mezgla vērtībai var piekļūt vietnē inputRef.current .

Reaģēt ar useRef()

Tas tiek ieviests Reaģēt 16.7 un augstāka versija. Tas palīdz piekļūt DOM mezglam vai elementam, un pēc tam mēs varam mijiedarboties ar šo DOM mezglu vai elementu, piemēram, fokusēt ievades elementu vai piekļūt ievades elementa vērtībai. Tas atgriež ref objektu, kura .strāva rekvizīts, kas inicializēts nodotajam argumentam. Atgrieztais objekts saglabājas visu komponenta kalpošanas laiku.

Sintakse

 const refContainer = useRef(initialValue);

Piemērs

Zemāk esošajā kodā useRef ir funkcija, kas tiek piešķirta mainīgajam, inputRef , un pēc tam pievienots atribūtam ar nosaukumu ref HTML elementā, uz kuru vēlaties atsaukties.

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