`Funcția forwardRef în React: Pasarea Referințelor către Noduri Copil` în React & Next.js

Componente & API-uri Standard React 16.3+ / 19

Ghid complet pentru forwardRef în React: transmiterea referințelor DOM către componente copil, evoluția în React 19 și accesul direct prin props.

Sintaxă

const CustomInput = forwardRef((props, ref) => <input ref={ref} {...props} />);

În mod tradițional, atributul ref nu era transmis automat prin props către o componentă copil. Funcția forwardRef a fost creată pentru a intercepta referința primită și a o atașa unui element DOM specific din interiorul componentei.

Noutate majoră în React 19: În React 19, ref a devenit o proprietate normală! Nu mai este obligatorie împachetarea componentelor funcționale în forwardRef, putând primi direct function Buton({ ref, children }). Totuși, forwardRef rămâne pe deplin suportat pentru compatibilitate cu bibliotecile existente.

Componentă reutilizabilă cu forwardRef

import { forwardRef } from 'react';

export const CampInputStilizat = forwardRef(function CampInputStilizat(props, ref) {
  return (
    <div className="grup-formular">
      <label>{props.eticheta}</label>
      <input ref={ref} className="input-rotunjit" type={props.type || 'text'} />
    </div>
  );
});