Manipolare il DOM con i ref

Ottenere un ref al nodo

Per accedere a un nodo DOM gestito da React, per prima cosa importa l’Hook useRef:

import { useRef } from 'react';

Poi, usalo per dichiarare un ref all’interno del tuo componente:

const myRef = useRef(null);

Infine, passa il ref come attributo ref al tag JSX per cui vuoi ottenere il nodo DOM:

<div ref={myRef}>

L’Hook useRef restituisce un oggetto con una singola proprietà chiamata current. Inizialmente, myRef.current sarà null. Quando React crea un nodo DOM per questo <div>, React inserirà un riferimento a questo nodo in myRef.current. Puoi quindi accedere a questo nodo DOM dai tuoi gestori di eventi e usare le API del browser integrate definite su di esso.

// Puoi usare qualsiasi API del browser, ad esempio:
myRef.current.scrollIntoView();

Esempio: mettere a fuoco un input di testo

In questo esempio, cliccare il bottone metterà a fuoco l’input:

Per implementarlo:

1. Dichiara inputRef con l’Hook useRef.
2. Passalo come <input ref={inputRef}>. Questo dice a React di inserire il nodo DOM di questo <input> in inputRef.current.
3. Nella funzione handleClick, leggi il nodo DOM dell’input da inputRef.current e chiama focus() su di esso con inputRef.current.focus().
4. Passa il gestore di eventi handleClick a <button> con onClick.

Sebbene la manipolazione del DOM sia il caso d’uso più comune per i ref, l’Hook useRef può essere usato per conservare altre cose fuori da React, come gli ID dei timer. Analogamente allo state, i ref restano tra le renderizzazioni. I ref sono come variabili di state che non avviano ri-renderizzazioni quando li imposti. Leggi sui ref in Referenziare valori con i ref.

Esempio: scorrere fino a un elemento

Puoi avere più di un ref in un componente. In questo esempio, c’è un carosello di tre immagini. Ogni bottone centra un’immagine chiamando il metodo del browser scrollIntoView() sul nodo DOM corrispondente:

<ul>
  {items.map((item) => {
    // Non funziona!
    const ref = useRef(null);
    return <li ref={ref} />;
  })}
</ul>

import { useRef, useState } from "react";

export default function CatFriends() {
  const itemsRef = useRef(null);
  const [catList, setCatList] = useState(setupCatList);

  function scrollToCat(cat) {
    const map = getMap();
    const node = map.get(cat);
    node.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "center",
    });
  }

  function getMap() {
    if (!itemsRef.current) {
      // Initialize the Map on first usage.
      itemsRef.current = new Map();
    }
    return itemsRef.current;
  }

  return (
    <>
      <nav>
        <button onClick={() => scrollToCat(catList[0])}>Neo</button>
        <button onClick={() => scrollToCat(catList[5])}>Millie</button>
        <button onClick={() => scrollToCat(catList[8])}>Bella</button>
      </nav>
      <div>
        <ul>
          {catList.map((cat) => (
            <li
              key={cat.id}
              ref={(node) => {
                const map = getMap();
                map.set(cat, node);

                return () => {
                  map.delete(cat);
                };
              }}
            >
              <img src={cat.imageUrl} />
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}

function setupCatList() {
  const catCount = 10;
  const catList = new Array(catCount)
  for (let i = 0; i < catCount; i++) {
    let imageUrl = '';
    if (i < 5) {
      imageUrl = "https://placecats.com/neo/320/240";
    } else if (i < 8) {
      imageUrl = "https://placecats.com/millie/320/240";
    } else {
      imageUrl = "https://placecats.com/bella/320/240";
    }
    catList[i] = {
      id: i,
      imageUrl,
    };
  }
  return catList;
}

<li
  key={cat.id}
  ref={node => {
    const map = getMap();
    // Add to the Map
    map.set(cat, node);

    return () => {
      // Remove from the Map
      map.delete(cat);
    };
  }}
>

Accedere ai nodi DOM di un altro componente

Puoi passare ref dal componente genitore ai componenti figlio come qualsiasi altra prop.

import { useRef } from 'react';

function MyInput({ ref }) {
  return <input ref={ref} />;
}

function MyForm() {
  const inputRef = useRef(null);
  return <MyInput ref={inputRef} />
}

Nell’esempio sopra, un ref viene creato nel componente genitore, MyForm, e viene passato al componente figlio, MyInput. MyInput poi passa il ref a <input>. Poiché <input> è un componente integrato, React imposta la proprietà .current del ref sul nodo DOM <input>.

L’inputRef creato in MyForm ora punta al nodo DOM <input> restituito da MyInput. Un gestore di click creato in MyForm può accedere a inputRef e chiamare focus() per impostare il focus su <input>.

import { useRef, useImperativeHandle } from "react";

function MyInput({ ref }) {
  const realInputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    // Only expose focus and nothing else
    focus() {
      realInputRef.current.focus();
    },
  }));
  return <input ref={realInputRef} />;
};

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

Quando React collega i ref

In React, ogni aggiornamento è diviso in due fasi:

• Durante la renderizzazione, React richiama i tuoi componenti per capire cosa dovrebbe essere a schermo.
• Durante la fase di commit, React applica le modifiche al DOM.

In generale, non vuoi accedere ai ref durante la renderizzazione. Questo vale anche per i ref che contengono nodi DOM. Durante la prima renderizzazione, i nodi DOM non sono ancora stati creati, quindi ref.current sarà null. E durante la renderizzazione degli aggiornamenti, i nodi DOM non sono ancora stati aggiornati. Quindi è troppo presto per leggerli.

React imposta ref.current durante la fase di commit. Prima di aggiornare il DOM, React imposta i valori ref.current interessati a null. Dopo aver aggiornato il DOM, React li imposta immediatamente sui nodi DOM corrispondenti.

Di solito, accederai ai ref dai gestori di eventi. Se vuoi fare qualcosa con un ref, ma non c’è un evento particolare in cui farlo, potresti aver bisogno di un Effetto. Parleremo degli Effetti nelle pagine successive.

import { useState, useRef } from 'react';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    setText('');
    setTodos([ ...todos, newTodo]);
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        Add
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

setTodos([ ...todos, newTodo]);
listRef.current.lastChild.scrollIntoView();

flushSync(() => {
  setTodos([ ...todos, newTodo]);
});
listRef.current.lastChild.scrollIntoView();

import { useState, useRef } from 'react';
import { flushSync } from 'react-dom';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    flushSync(() => {
      setText('');
      setTodos([ ...todos, newTodo]);
    });
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        Add
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

Best practice per la manipolazione del DOM con i ref

I ref sono un escape hatch. Dovresti usarli solo quando devi “uscire da React”. Esempi comuni includono la gestione del focus, della posizione di scorrimento o la chiamata ad API del browser che React non espone.

Se ti attieni ad azioni non distruttive come mettere a fuoco e scorrere, non dovresti incontrare problemi. Tuttavia, se provi a modificare manualmente il DOM, puoi rischiare di entrare in conflitto con le modifiche che React sta facendo.

Per illustrare questo problema, questo esempio include un messaggio di benvenuto e due bottoni. Il primo bottone ne alterna la presenza usando renderizzazione condizionale e state, come faresti di solito in React. Il secondo bottone usa l’API DOM remove() per rimuoverlo forzatamente dal DOM fuori dal controllo di React.

Prova a premere “Toggle with setState” alcune volte. Il messaggio dovrebbe scomparire e riapparire. Poi premi “Remove from the DOM”. Questo lo rimuoverà forzatamente. Infine, premi “Toggle with setState”:

Dopo aver rimosso manualmente l’elemento DOM, provare a usare setState per mostrarlo di nuovo causerà un crash. Questo perché hai cambiato il DOM, e React non sa come continuare a gestirlo correttamente.

Evita di cambiare nodi DOM gestiti da React. Modificare, aggiungere figli o rimuovere figli da elementi gestiti da React può portare a risultati visivi inconsistenti o crash come quello sopra.

Tuttavia, questo non significa che non puoi farlo affatto. Richiede cautela. Puoi modificare in sicurezza parti del DOM che React non ha motivo di aggiornare. Ad esempio, se un <div> è sempre vuoto nel JSX, React non avrà motivo di toccare la sua lista di figli. Pertanto, è sicuro aggiungere o rimuovere manualmente elementi lì.