logo

TechCodeview

Reagire Rif

Refs è la scorciatoia utilizzata per Riferimenti in Reagire. È simile a chiavi in Reagire. È un attributo che consente di memorizzare un riferimento a particolari nodi DOM o elementi React. Fornisce un modo per accedere ai nodi React DOM o agli elementi React e come interagire con essi. Si usa quando vogliamo cambiare il valore di un componente figlio, senza fare uso di oggetti di scena.

Quando utilizzare i rif

I riferimenti possono essere utilizzati nei seguenti casi:

  • Quando abbiamo bisogno di misurazioni DOM come la gestione della messa a fuoco, la selezione del testo o la riproduzione multimediale.
  • Viene utilizzato per attivare animazioni imperative.
  • Quando si integra con librerie DOM di terze parti.
  • Può anche essere utilizzato come nelle richiamate.

Quando non utilizzare Rif

  • Il suo utilizzo dovrebbe essere evitato per qualsiasi cosa possa essere fatta dichiarativamente . Ad esempio, invece di utilizzare aprire() E vicino() metodi su un componente Dialog, è necessario passare un file è aperto appoggiarlo.
  • Dovresti evitare un uso eccessivo dei Refs.

Come creare Rif

In React, Refs può essere creato utilizzando React.createRef() . Può essere assegnato agli elementi React tramite il file rif attributo. Viene comunemente assegnato a una proprietà di istanza quando viene creato un componente e quindi è possibile fare riferimento a tutto il componente.

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

Come accedere ai Rif

In React, quando un ref viene passato a un elemento all'interno del metodo render, è possibile accedere a un riferimento al nodo tramite l'attributo corrente del ref.

 const node = this.callRef.current;

Rif. Proprietà attuali

Il valore di riferimento varia a seconda del tipo di nodo:

  • Quando l'attributo ref viene utilizzato nell'elemento HTML, il ref creato con React.createRef() riceve l'elemento DOM sottostante come suo attuale proprietà.
  • Se l'attributo ref viene utilizzato su un componente di classe personalizzata, l'oggetto ref riceve il file montato istanza del componente come proprietà corrente.
  • L'attributo ref non può essere utilizzato su componenti funzionali perché non hanno istanze.

Aggiungi Ref agli elementi DOM

Nell'esempio seguente, stiamo aggiungendo un riferimento per memorizzare il riferimento a un nodo o elemento 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;

Produzione

Reagire Rif

Aggiungi i componenti Ref ai componenti Class

Nell'esempio seguente, stiamo aggiungendo un riferimento per memorizzare il riferimento a un componente della classe.

Esempio

 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;

Produzione

Reagire Rif

Riferimenti di richiamata

In reazione, c'è un altro modo di usare i riferimenti che si chiama ' riferimenti di richiamata ' e dà più controllo quando lo sono gli arbitri impostato E non settato . Invece di creare riferimenti con il metodo createRef(), React consente di creare riferimenti passando una funzione di callback all'attributo ref di un componente. Sembra il codice seguente.

 this.callRefInput = element} /&gt;

La funzione di callback viene utilizzata per memorizzare un riferimento al nodo DOM in una proprietà di istanza ed è possibile accedervi altrove. È possibile accedervi come di seguito:

 this.callRefInput.value

L'esempio seguente aiuta a comprendere il funzionamento dei riferimenti di callback.

 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;

Nell'esempio sopra, React chiamerà il callback 'ref' per memorizzare il riferimento all'elemento DOM di input quando il componente monta e quando il componente smonta , chiamalo con nullo . Gli arbitri sono sempre aggiornato prima di componenteDidMount O componenteDidUpdate incendi. Il passaggio dei riferimenti di callback tra i componenti è lo stesso con cui puoi lavorare con i riferimenti degli oggetti, che vengono creati con React.createRef().

Produzione

Reagire Rif

Inoltro Ref da un componente a un altro componente

L'inoltro dei riferimenti è una tecnica utilizzata per passare a rif attraverso un componente a uno dei suoi componenti figli. Può essere eseguito utilizzando il file React.forwardRef() metodo. Questa tecnica è particolarmente utile con componenti di ordine superiore e particolarmente utilizzato nelle librerie di componenti riutilizzabili. L'esempio più comune è riportato di seguito.

Esempio

 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;

Nell'esempio sopra, c'è un componente L'immissione di testo che ha un figlio come campo di input. Ora, per passare o inoltrare il file rif fino all'input, prima crea un riferimento e poi passa il tuo riferimento a . Successivamente, React inoltra il riferimento al file avantiRif funzionare come secondo argomento. Successivamente, inoltriamo questo argomento ref fino a . Ora è possibile accedere al valore del nodo DOM su ingressoRif.corrente .

Reagisci con useRef()

Viene introdotto nel Reagire 16.7 e versione superiore. Aiuta ad accedere al nodo o elemento DOM e quindi possiamo interagire con quel nodo o elemento DOM, ad esempio focalizzando l'elemento di input o accedendo al valore dell'elemento di input. Restituisce l'oggetto ref di cui .attuale proprietà inizializzata sull'argomento passato. L'oggetto restituito persiste per tutta la durata del componente.

Sintassi

 const refContainer = useRef(initialValue);

Esempio

Nel codice seguente, usoRif è una funzione che viene assegnata a una variabile, ingressoRif e quindi collegato a un attributo chiamato ref all'interno dell'elemento HTML a cui desideri fare riferimento.

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