React — это мощная библиотека JavaScript для создания пользовательских интерфейсов, а TypeScript добавляет дополнительный уровень безопасности типов для обеспечения надежности кода. В этой статье мы рассмотрим комбинацию двух удобных функций React: frontRef и useImperativeHandle. Эти функции позволяют нам передавать ссылки между компонентами и определять собственный интерфейс для открытых методов дочернего компонента. Используя эти методы, мы можем создавать более гибкие и повторно используемые компоненты в наших приложениях React на основе TypeScript.

Что такое frontRef?
В React ссылки используются для прямого доступа к компоненту или элементу DOM или взаимодействия с ним. Функция forwardRef — это компонент более высокого порядка, который позволяет передавать ссылки из родительского компонента в дочерний компонент. Это особенно полезно, когда мы хотим напрямую получить доступ к методам или свойствам дочернего компонента.

Пример:

import React, { forwardRef } from 'react';
const ChildComponent = forwardRef((props, ref) => {
  // Component logic here
  return <div ref={ref}>Child Component</div>;
});
const ParentComponent = () => {
  const childRef = React.createRef();
  // Access child component methods using the ref
  const handleClick = () => {
    childRef.current.someMethod();
  };
  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Call Child Method</button>
    </div>
  );
};

Что такое useImperativeHandle?
Хук useImperativeHandleпозволяет нам определить собственный интерфейс для дочерних компонентов, обернутых forwardRef. Это позволяет нам выборочно предоставлять определенные методы или свойства родительскому компоненту, скрывая остальную часть деталей реализации компонента. Это может быть полезно, если мы хотим предоставить потребителям наших компонентов более понятный и интуитивно понятный API.

Пример:

import React, { forwardRef, useImperativeHandle } from 'react';
const ChildComponent = forwardRef((props, ref) => {
  // Component logic here
  // Expose specific method(s) to the parent component
  useImperativeHandle(ref, () => ({
    someMethod: () => {
      // Method implementation
    },
    // more methods...
  }));
  return <div>Child Component</div>;
});

Объединение frontRef и useImperativeHandle:
Мы можем объединить forwardRefи useImperativeHandleдля создания более мощных и настраиваемых компонентов. Используя forwardRef, мы можем передать ссылку дочернему компоненту, позволяя родительскому компоненту получить доступ к своим методам. С помощью useImperativeHandleмы можем формировать предоставляемые методы в соответствии с нашими требованиями, обеспечивая чистый и лаконичный API для родительского компонента.

Пример:

import React, { forwardRef, useImperativeHandle } from 'react';
const ChildComponent = forwardRef((props, ref) => {
  // Component logic here
  // Expose specific methods to the parent component
  useImperativeHandle(ref, () => ({
    someMethod: () => {
      // Method implementation
    },
    anotherMethod: () => {
      // Method implementation
    },
  }));
  return <div>Child Component</div>;
});
const ParentComponent = () => {
  const childRef = React.createRef();
  // Access child component methods using the ref
  const handleClick = () => {
    childRef.current.someMethod();
  };
  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Call Child Method</button>
    </div>
  );
};

В этой статье мы рассмотрели, как расширить наши компоненты React, используя forwardRefи useImperativeHandleв TypeScript. Объединив эти функции, мы можем создавать более гибкие и повторно используемые компоненты, сохраняя при этом безопасность типов. Мы научились передавать ссылки между компонентами и определять собственные интерфейсы для открытых методов дочерних компонентов. Используя эти методы, мы можем создавать более надежные и интуитивно понятные API для наших приложений React.