Что такое forwardRef() в React и для чего он используется?

forwardRef — это функция в React, которая позволяет передавать рефы (ссылки) через компоненты, таким образом позволяя родительским компонентам получать доступ к DOM-элементам внутреннего компонента. Это особенно полезно, когда вам нужно взаимодействовать с конкретным элементом в функциональном компоненте, например, для управления фокусом, выполнения анимаций или интеграции с библиотеками, которые требуют рефов.

Пример использования forwardRef

Давайте рассмотрим пример, в котором мы создадим кастомный компонент кнопки, использующий forwardRef.

Шаг 1: Создайте компонент Button

import React, { forwardRef } from 'react';

// Создаем компонент Button, который принимает реф
const Button = forwardRef((props, ref) => {
  return (
    <button ref={ref} {...props}>
      {props.children}
    </button>
  );
});

export default Button;

В этом примере мы создали компонент Button, который принимает реф как второй аргумент и передает его в элемент <button>. Это позволяет родительскому компоненту получить доступ к рефу кнопки.

Шаг 2: Использование Button в родительском компоненте

Теперь давайте создадим родительский компонент, который будет использовать нашу кнопку.

import React, { useRef } from 'react';
import Button from './Button';

const App = () => {
  const buttonRef = useRef(null);

  const handleClick = () => {
    // Используем реф для обращения к DOM-элементу кнопки
    buttonRef.current.focus(); // Фокусируем кнопку
  };

  return (
    <div>
      <Button ref={buttonRef}>Нажми меня</Button>
      <button onClick={handleClick}>Фокус на кнопке</button>
    </div>
  );
};

export default App;

Описание кода

В этом родительском компоненте App мы используем useRef для создания рефа, который будет ссылаться на компонент Button. Когда пользователь нажимает кнопку "Фокус на кнопке", вызывается функция handleClick, которая устанавливает фокус на кнопку Button с помощью рефа buttonRef.

Когда использовать forwardRef

Вы можете использовать forwardRef в следующих ситуациях:

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