logo

TechCodeview

React Refs

A Refs a rövidítés hivatkozások a Reactban. Ez hasonló kulcsok a Reactban. Ez egy attribútum, amely lehetővé teszi bizonyos DOM-csomópontokra vagy React elemekre való hivatkozás tárolását. Módot biztosít a React DOM csomópontok vagy React elemek eléréséhez, és a velük való interakcióhoz. Akkor használjuk, ha egy gyermekkomponens értékét akarjuk módosítani, kellékek használata nélkül.

Mikor kell használni a Refs

A hivatkozások a következő esetekben használhatók:

  • Amikor DOM-mérésekre van szükségünk, mint például a fókusz kezelése, a szövegkiválasztás vagy a médialejátszás.
  • A kötelező animációk kiváltására használják.
  • Harmadik fél DOM-könyvtáraival való integráció esetén.
  • Visszahívásként is használható.

Mikor ne használja a Refs

  • Használatát kerülni kell mindenre, amit meg lehet tenni deklaratívan . Például használata helyett nyisd ki() és Bezárás() metódusokat egy Dialog komponensen, át kell adnia egy nyitva van támaszt hozzá.
  • Kerülnie kell a Refs túlzott használatát.

Hogyan hozzunk létre Refs

A Reactban a hivatkozások a használatával hozhatók létre React.createRef() . A React elemekhez a következőn keresztül rendelhető hozzá ref tulajdonság. Általában egy példánytulajdonsághoz van hozzárendelve egy komponens létrehozásakor, majd az egész összetevőben hivatkozni lehet rá.

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

Hogyan lehet elérni a Refs

A React alkalmazásban, amikor egy ref átadásra kerül egy elemnek a renderelési metóduson belül, a csomópontra való hivatkozás elérhető a ref aktuális attribútumán keresztül.

 const node = this.callRef.current;

Az aktuális tulajdonságokra hivatkozik

A ref érték a csomópont típusától függően változik:

  • Ha a ref attribútumot használja a HTML elemben, a ref a következővel jön létre React.createRef() az alapul szolgáló DOM elemet kapja meg jelenlegi ingatlan.
  • Ha a ref attribútumot egy egyéni osztálykomponensen használják, akkor a ref objektum megkapja a felszerelt az összetevő példányát aktuális tulajdonságaként.
  • A ref attribútum nem használható itt funkció összetevői mert nincsenek példányaik.

Ref hozzáadása a DOM-elemekhez

Az alábbi példában egy ref-t adunk hozzá egy DOM-csomópontra vagy -elemre való hivatkozás tárolására.

 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;

Kimenet

React Refs

Ref hozzáadása az osztály összetevőihez

Az alábbi példában egy ref-t adunk hozzá egy osztálykomponensre való hivatkozás tárolásához.

Példa

 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;

Kimenet

React Refs

Visszahívás refs

React, van egy másik módja a refs használatának, az úgynevezett ' visszahívás refs ' és ez nagyobb irányítást ad, ha a refs készlet és nincs beállítva . Ahelyett, hogy a createRef() metódussal hozna létre refeket, a React lehetővé teszi a refek létrehozását úgy, hogy egy visszahívási függvényt ad át egy komponens ref attribútumának. Úgy néz ki, mint az alábbi kód.

 this.callRefInput = element} /&gt;

A visszahívási függvény a DOM-csomópont hivatkozásának tárolására szolgál egy példánytulajdonságban, és máshonnan is elérhető. Az alábbiak szerint érhető el:

 this.callRefInput.value

Az alábbi példa segít megérteni a visszahívási hivatkozások működését.

 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;

A fenti példában a React meghívja a „ref” visszahívást, hogy tárolja a bemeneti DOM elemre mutató hivatkozást, amikor az összetevő tartók , és amikor a komponens lecsatol , hívja ezzel nulla . A referenciák mindig naprakész előtte komponentDidMount vagy komponentDidUpdate tüzek. A visszahívási hivatkozások átadása az összetevők között megegyezik az objektum refs-szel, amely a React.createRef() segítségével jön létre.

Kimenet

React Refs

Ref továbbítása egyik komponensről a másikra

A ref forwarding egy olyan technika, amelyet az a. átadására használnak ref egy összetevőn keresztül annak egyik gyermekkomponenséhez. A felhasználásával hajtható végre React.forwardRef() módszer. Ez a technika különösen hasznos magasabb rendű alkatrészek és kifejezetten újrafelhasználható komponens könyvtárakban használják. A leggyakoribb példa az alábbiakban látható.

Példa

 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;

A fenti példában van egy összetevő Szövegbevitel amelynek beviteli mezője egy gyermek. Most, hogy adja át vagy továbbítsa a ref lefelé a bemenetig, először hozzon létre egy ref-et, majd adja át a ref-et a következőnek . Ezt követően a React továbbítja a ref-t a forwardRef második argumentumként funkcionál. Ezután továbbítjuk ezt a ref argumentumot . Most a DOM csomópont értéke a címen érhető el inputRef.current .

Reakció a useRef()

ben kerül bevezetésre Reagálás 16.7 és a fenti verzió. Segít elérni a DOM csomópontot vagy elemet, majd interakcióba léphetünk ezzel a DOM csomóponttal vagy elemmel, például fókuszálhatjuk a bemeneti elemet vagy elérhetjük a bemeneti elem értékét. A ref objektumot adja vissza, amelynek .jelenlegi tulajdonság inicializálva az átadott argumentumra. A visszaadott objektum az összetevő élettartama alatt megmarad.

Szintaxis

 const refContainer = useRef(initialValue);

Példa

Az alábbi kódban useRef olyan függvény, amely egy változóhoz van hozzárendelve, inputRef , majd csatolja a ref nevű attribútumhoz azon HTML-elemen belül, amelyre hivatkozni szeretne.

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