Refs on lyhenne, jota käytetään viittauksia Reactissa. Se on samanlainen kuin avaimet Reactissa. Se on attribuutti, joka mahdollistaa viittauksen tallentamisen tiettyihin DOM-solmuihin tai React-elementteihin. Se tarjoaa tavan käyttää React DOM -solmuja tai React-elementtejä ja olla vuorovaikutuksessa niiden kanssa. Sitä käytetään, kun haluamme muuttaa alikomponentin arvoa ilman rekvisiitta.
Milloin käyttää viitteitä
Viitteitä voidaan käyttää seuraavissa tapauksissa:
- Kun tarvitsemme DOM-mittauksia, kuten tarkennuksen hallintaa, tekstin valintaa tai median toistoa.
- Sitä käytetään pakottavien animaatioiden käynnistämiseen.
- Kun integroidaan kolmannen osapuolen DOM-kirjastoihin.
- Sitä voidaan käyttää myös takaisinkutsuissa.
Milloin ei saa käyttää Refs
- Sen käyttöä tulee välttää kaikkeen, mitä voidaan tehdä deklaratiivisesti . Esimerkiksi käytön sijaan avata() ja kiinni() Dialog-komponentin menetelmät, sinun on välitettävä an on auki tukea sitä.
- Sinun tulee välttää viitteiden liiallista käyttöä.
Kuinka luoda viitteitä
Reactissa viitteitä voidaan luoda käyttämällä React.createRef() . Se voidaan määrittää React-elementteihin viite attribuutti. Se määritetään yleensä ilmentymäominaisuuteen, kun komponentti luodaan, ja sitten siihen voidaan viitata kaikkialla komponentissa.
class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } } Refs
Kun Reactissa viite välitetään elementille renderöintimenetelmän sisällä, viittaus solmuun voidaan käyttää viitteen nykyisen attribuutin kautta.
const node = this.callRef.current;
Viittaa nykyisiin ominaisuuksiin
Viitearvo vaihtelee solmun tyypin mukaan:
- Kun ref-attribuuttia käytetään HTML-elementissä, ref luotiin käyttämällä React.createRef() vastaanottaa sen alla olevan DOM-elementin nykyinen omaisuutta.
- Jos ref-attribuuttia käytetään mukautetussa luokkakomponentissa, ref-objekti vastaanottaa asennettu komponentin esiintymä sen nykyisenä ominaisuutena.
- Ref-attribuuttia ei voi käyttää toimintokomponentit koska heillä ei ole tapauksia.
Lisää viite DOM-elementteihin
Alla olevassa esimerkissä lisäämme viitteen viittauksen tallentamiseksi DOM-solmuun tai -elementtiin.
import React, { Component } from 'react'; import { render } from 'react-dom'; 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; Lähtö
Lisää viite luokkakomponentteihin
Alla olevassa esimerkissä lisäämme viitteen luokkakomponentin viittauksen tallentamiseksi.
Esimerkki
import React, { Component } from 'react'; import { render } from 'react-dom'; 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; Lähtö
Takaisinsoitto refers
Reaktiossa on toinen tapa käyttää viitteitä, jota kutsutaan nimellä ' takaisinsoitto viit ' ja se antaa enemmän hallintaa, kun tuomarit ovat aseta ja pois päältä . Sen sijaan, että luotaisiin viitteitä createRef() -menetelmällä, React mahdollistaa tavan luoda viitteitä välittämällä takaisinkutsun funktion komponentin ref-attribuutille. Se näyttää alla olevalta koodilta.
this.callRefInput = element} />
Takaisinsoittotoimintoa käytetään tallentamaan viittaus DOM-solmuun ilmentymäominaisuuteen, ja sitä voidaan käyttää muualla. Siihen pääsee seuraavasti:
this.callRefInput.value
Alla oleva esimerkki auttaa ymmärtämään takaisinsoittoviitteiden toimintaa.
import React, { Component } from 'react'; import { render } from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element => { this.callRefInput = element; }; this.focusRefInput = () => { //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; Yllä olevassa esimerkissä React kutsuu 'ref'-takaisinkutsun tallentaakseen viittauksen syötettyyn DOM-elementtiin, kun komponentti kiinnikkeet , ja kun komponentti irrotetaan , kutsu sitä tyhjä . Viittaukset ovat aina ajantasalla ennen komponenttiDidMount tai componentDidUpdate tulipalot. Takaisinkutsuviitteiden kulku komponenttien välillä on sama kuin voit työskennellä React.createRef(:llä) luotujen objektiviitteiden kanssa.
Lähtö
Ref:n välittäminen komponentista toiseen
Viitteen edelleenlähetys on tekniikka, jota käytetään a viite komponentin kautta johonkin sen alikomponenteista. Se voidaan suorittaa käyttämällä React.forwardRef() menetelmä. Tämä tekniikka on erityisen hyödyllinen korkeamman luokan komponentteja ja käytetään erityisesti uudelleenkäytettävissä komponenttikirjastoissa. Yleisin esimerkki on alla.
Esimerkki
import React, { Component } from 'react'; import { render } from 'react-dom'; const TextInput = React.forwardRef((props, ref) => ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e => { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}> Submit ); } } export default App; Yllä olevassa esimerkissä on komponentti Tekstinsyöttö jonka syöttökentässä on lapsi. Nyt voit siirtää tai välittää viite alas syötteeseen, luo ensin viite ja välitä sitten viite:lle . Tämän jälkeen React välittää viitteen edelleen eteenpäinRef toimii toisena argumenttina. Seuraavaksi välitämme tämän viite-argumentin eteenpäin . Nyt DOM-solmun arvoon pääsee käsiksi osoitteessa inputRef.current .
Reagoi komennolla useRef()
Se esitellään vuonna Reagoi 16.7 ja uudempi versio. Se auttaa pääsemään käsiksi DOM-solmuun tai -elementtiin, ja sitten voimme olla vuorovaikutuksessa kyseisen DOM-solmun tai -elementin kanssa, kuten syöttöelementin tarkentaminen tai syöteelementin arvon käyttäminen. Se palauttaa ref-objektin, jonka .virta ominaisuus alustetaan ohitettuun argumenttiin. Palautettu objekti säilyy komponentin käyttöiän ajan.
Syntaksi
const refContainer = useRef(initialValue);
Esimerkki
Alla olevassa koodissa useRef on funktio, joka liitetään muuttujaan, inputRef , ja liitetään sitten attribuutiksi nimeltä ref sen HTML-elementin sisällä, johon haluat viitata.
function useRefExample() { const inputRef= useRef(null); const onButtonClick = () => { inputRef.current.focus(); }; return ( Submit ); }