Как мне набрать React ref для доступа к элементу DOM из массива

Question

Допустим, я хочу получить доступ к последнему элементу в массиве элементов JSX.

let array = [
  <button type="button" />,
  <button type="button" />,
  <button type="button" />,
];

let last = array[array.length - 1];

Вывод типа здесь работает нормально.

Но теперь допустим, что я хочу прикрепить ссылку к последнему элементу в этом массиве.

let last = React.useRef<HTMLButtonElement>();

let array = [
  <button type="button" />,
  <button type="button" />,
  <button type="button" />,
];

last.current = array[array.length - 1];

Приведенный выше фрагмент кода приводит к этой ошибке.

Type 'Element' is missing the following properties from type 'HTMLButtonElement':
disabled, form, formAction, formEnctype, and 249 more.

Я подумал, что, возможно, мне нужно было явно набрать array: HTMLButtonElement[], но это просто перемещает ошибку в объявление массива.

Изменение типа ссылки на React.useRef<JSX.Element> устранит ошибку, но утратит специфичность обеспечения ее элемента кнопки.

Answer 1

Мой пример вопроса объединяет элементы DOM и JSX. Я использовал <button> элементы JSX в массиве, чтобы упростить возникшую проблему, но по ошибке создал новую проблему в результате.

Создание элементов DOM вместо элементов JSX работает.

let last = React.useRef<HTMLButtonElement>();

let array = [
  document.createElement('button'),
  document.createElement('button'),
  document.createElement('button'),
];

last.current = array[array.length - 1];

Мы также можем получить массив элементов DOM, запросив их на странице (что и является моей реальной ситуацией).

let array = document.querySelectorAll<HTMLButtonElement>('button');

Answer 2

в вашем примере вы можете просто установить свой ref как свойство для последнего элемента:

let last = React.useRef<Partial<HTMLButtonElement>|null>(null);
let array = [
  <button type="button" />,
  <button type="button" />,
  <button type="button" ref={last} />,
];

Но я предполагаю, что этот пример упрощен, и это не сработает для вашего фактического вариант использования ...