logo

TechCodeview

Reagera Refs

Refs är förkortningen som används för referenser i React. Det liknar nycklar i React. Det är ett attribut som gör det möjligt att lagra en referens till särskilda DOM-noder eller React-element. Det ger ett sätt att komma åt React DOM-noder eller React-element och hur man interagerar med det. Det används när vi vill ändra värdet på en underordnad komponent, utan att använda rekvisita.

När ska man använda Refs

Refs kan användas i följande fall:

  • När vi behöver DOM-mätningar som att hantera fokus, textval eller mediauppspelning.
  • Den används för att utlösa imperativa animationer.
  • Vid integration med tredjeparts DOM-bibliotek.
  • Den kan också användas som vid återuppringningar.

När ska man inte använda Refs

  • Dess användning bör undvikas för allt som kan göras deklarativt . Till exempel istället för att använda öppen() och stänga() metoder på en Dialog-komponent måste du klara en är öppen stödja det.
  • Du bör undvika överanvändning av Refs.

Hur man skapar Refs

I React kan Refs skapas genom att använda React.createRef() . Den kan tilldelas React-element via ref attribut. Den tilldelas vanligtvis en instansegenskap när en komponent skapas och kan sedan refereras till i hela komponenten.

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

Hur man kommer åt Refs

I React, när en ref skickas till ett element inuti rendermetoden, kan en referens till noden nås via refens aktuella attribut.

 const node = this.callRef.current;

Refs aktuella egenskaper

Referensvärdet skiljer sig beroende på typen av nod:

  • När ref-attributet används i HTML-elementet skapas refen med React.createRef() tar emot det underliggande DOM-elementet som dess nuvarande fast egendom.
  • Om ref-attributet används på en anpassad klasskomponent, får ref-objektet monterad instans av komponenten som dess nuvarande egenskap.
  • Ref-attributet kan inte användas på funktionskomponenter eftersom de inte har instanser.

Lägg till Ref till DOM-element

I exemplet nedan lägger vi till en ref för att lagra referensen till en DOM-nod eller -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;

Produktion

Reagera Refs

Lägg till Ref till klasskomponenter

I exemplet nedan lägger vi till en ref för att lagra referensen till en klasskomponent.

Exempel

 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;

Produktion

Reagera Refs

Callback refs

Som reaktion finns det ett annat sätt att använda refs som kallas ' callback refs ' och det ger mer kontroll när domarna är det uppsättning och avstängd . Istället för att skapa refs med createRef()-metoden tillåter React ett sätt att skapa refs genom att skicka en callback-funktion till ref-attributet för en komponent. Det ser ut som koden nedan.

 this.callRefInput = element} /&gt;

Callback-funktionen används för att lagra en referens till DOM-noden i en instansegenskap och kan nås någon annanstans. Den kan nås enligt nedan:

 this.callRefInput.value

Exemplet nedan hjälper till att förstå hur callback refs fungerar.

 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;

I exemplet ovan kommer React att anropa 'ref' callback för att lagra referensen till det ingående DOM-elementet när komponenten fästen , och när komponenten avmonteras , kalla det med null . Refs är alltid aktuell Innan componentDidMount eller componentDidUpdate bränder. Återuppringningsreferens passerar mellan komponenter är samma som du kan arbeta med objektrefs, som skapas med React.createRef().

Produktion

Reagera Refs

Vidarebefordra Ref från en komponent till en annan komponent

Ref forwarding är en teknik som används för att passera en ref genom en komponent till en av dess underordnade komponenter. Det kan utföras genom att använda React.forwardRef() metod. Denna teknik är särskilt användbar med komponenter av högre ordning och speciellt använd i återanvändbara komponentbibliotek. Det vanligaste exemplet ges nedan.

Exempel

 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;

I exemplet ovan finns det en komponent Textinmatning som har ett barn som inmatningsfält. Nu, för att skicka eller vidarebefordra ref ner till ingången, skapa först en ref och skicka sedan din ref ner till . Efter det skickar React vidare domaren till framåtRef fungera som ett andra argument. Därefter vidarebefordrar vi detta ref-argument ner till . Nu kan värdet på DOM-noden nås på inputRef.current .

Reagera med useRef()

Det introduceras i Reagera 16.7 och ovanstående version. Det hjälper att få åtkomst till DOM-noden eller -elementet, och sedan kan vi interagera med den DOM-noden eller -elementet som att fokusera ingångselementet eller komma åt ingångselementvärdet. Det returnerar ref-objektet vars .nuvarande egenskap initierad till det godkända argumentet. Det returnerade objektet kvarstår under komponentens livstid.

Syntax

 const refContainer = useRef(initialValue);

Exempel

I koden nedan, användRef är en funktion som tilldelas en variabel, inputRef , och sedan kopplat till ett attribut som heter ref inuti HTML-elementet som du vill referera till.

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