Использование компонента forwardRef с дочерними элементами в TypeScript

Question

Используя @ types / реагировать 16.8.2 и TypeScript 3.3.1.

Я поднял этот пример прямых ссылок прямо из React документации и добавил параметры типа пары:

const FancyButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef<HTMLButtonElement>();
<FancyButton ref={ref}>Click me!</FancyButton>;

В последней строке в FancyButton появляется следующая ошибка:

Тип '{ children: string; ref: RefObject<HTMLButtonElement>; }' не может быть назначен типу * IntrinsicAttributes & RefAttributes<HTMLButtonElement> '.Свойство 'children' не существует для типа 'IntrinsicAttributes & RefAttributes<HTMLButtonElement>'. Ts (2322)

Может показаться, что определение типа для возвращаемого значения React.forwardRef неверно, не сливаясь вдети правильно подпирают.Если я сделаю <FancyButton> самозакрывающимся, ошибка исчезнет.Отсутствие результатов поиска по этой ошибке заставляет меня поверить, что я упускаю что-то очевидное.

Answer 1

trevorsg, вам нужно передать свойства кнопки:

import * as React from 'react'

type ButtonProps = React.HTMLProps<HTMLButtonElement>

const FancyButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
  <button type="button" ref={ref} className="FancyButton">
    {props.children}
  </button>
))

// You can now get a ref directly to the DOM button:
const ref = React.createRef<HTMLButtonElement>()

<FancyButton ref={ref}>Click me!</FancyButton>

ADDED:

В последних версиях TS и @ types / реагировать вы также можете использовать React.ComponentPropsWithoutRef<'button'> вместоReact.HTMLProps<HTMLButtonElement>