Как предоставить внешний доступ к методам функционального компонента в React (форвардинг ref)?

Основная концепция

В React функциональные компоненты не имеют экземпляров, как классовые, поэтому напрямую передать ref нельзя. Однако с помощью forwardRef можно пробросить ref из родителя в дочерний компонент, а useImperativeHandle позволяет определить, какие методы и свойства будут доступны через этот ref. Это полезно, когда нужно управлять поведением дочернего компонента извне, например, фокусировать поле ввода, очищать форму или запускать анимацию.

Как это работает

forwardRef принимает функцию, которая получает props и ref, и возвращает React-элемент. Внутри дочернего компонента useImperativeHandle связывает ref с объектом, содержащим методы, которые вы хотите сделать публичными. Родительский компонент может затем вызывать эти методы через ref, как если бы это был обычный DOM-элемент.

Пример кода

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

const Child = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focusInput: () => inputRef.current.focus(),
    clearInput: () => (inputRef.current.value = '')
  }));

  return <input ref={inputRef} />;
});

function Parent() {
  const childRef = useRef(null);

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.focusInput()}>Focus</button>
      <button onClick={() => childRef.current.clearInput()}>Clear</button>
    </div>
  );
}

Применение

Этот паттерн часто используется в библиотеках компонентов, когда нужно предоставить API для управления компонентом, например, в модальных окнах, тултипах или сложных формах. Он также полезен при интеграции с императивными библиотеками, такими как D3 или Canvas, где требуется прямой доступ к DOM-узлам.

Вывод

Используйте forwardRef и useImperativeHandle, когда необходимо предоставить внешний доступ к методам функционального компонента. Это сохраняет инкапсуляцию и позволяет родителю управлять дочерним компонентом без нарушения React-парадигмы.