ReactJS - диалог выбора каталога не работает

Question

Мне нужен диалог выбора каталога в моем приложении React. Я следил за этой темой SO, которая может сработать для некоторых людей, но не для меня. Получение ошибки времени компиляции как

Свойство «каталог» не существует для типа «DetailHTMLProps <InputHTMLAttributes, HTMLInputElement>».

Я обновил React до последней RC-версии 17.rc.1, думая, что для этого может быть исправлена ​​ошибка, но безуспешно.

редактировать

Есть способ добавить этот скрипт в конец файла с помощью тега для выбора каталога, предложенный @ Scratch'N'Purr в комментариях.

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    directory?: string;
    webkitdirectory?:string;
  }
}

Answer 1

Он отлично работает в Javascript, но проблема в Typescript. Думаю, вы правы, что это проблема .

Вы можете установить его вручную, используя ref.

import * as React from "react";
import "./styles.css";

export default function App() {
  const ref = React.useRef<HTMLInputElement>(null);

  React.useEffect(() => {
    if (ref.current !== null) {
      ref.current.setAttribute("directory", "");
      ref.current.setAttribute("webkitdirectory", "");
    }
  }, [ref]);

  return <input type="file" ref={ref} />;
}