React: “Как использовать forwardRef с generic компонентами Статья объясняет, к…”

Как использовать forwardRef с generic компонентами

Статья объясняет, как использовать forwardRef с обобщенными компонентами в TypeScript. Она рассматривает проблемы forwardRef с типизацией обобщенных компонентов и предлагает способ их решения. Этот метод позволяет сохранить типовую безопасность при передаче ссылок на компоненты.

Одно из ограничений forwardRef в том, что он отключает выведение типа для generic компонентов. Например:


const Table = <T,>(
  props: {
    data: T[];
    renderRow: (row: T) => React.ReactNode;
  },
  ref: React.ForwardedRef<HTMLTableElement>
) => {
  /** --snip-- */
};
 
const ForwardReffedTable = React.forwardRef(Table);

<Table
    data={["a", "b"]}
    renderRow={(row) => { // Тип выводится: row: string
      return <tr>{row}</tr>;
  }}
/>;

<ForwardReffedTable
    data={["a", "b"]}
    renderRow={(row) => { // Тип не выводится: row: unknown
      return <tr>{row}</tr>;
  }}
/>;

https://www.totaltypescript.com/forwardref-with-generic-components

✍️ @React_lib