reactjs - Typescript上传目录，类型上不存在属性 'directory'

Question

我有一个基本的文件输入，我想允许用户上传整个目录

      <input
        type='file'
        directory=''
        webkitdirectory=''
        className={cssClass}
        onChange={processFiles}
      />

这给出了 typescript 错误

Type '{ type: "file"; directory: string; webkitdirectory: string; className: string; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Property 'directory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.ts(2322)

Answer 1

截至今天，React 提供的当前类型似乎还没有一种“原生”方法可以做到这一点。您可以在 React 的存储库上查看 this issue。最好的方法似乎是自己声明这些类型:

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

根据问题上的this comment。

这个类型定义只会让 Typescript 感到冷淡，但请记住，React 会将它无法识别的 props 转发给底层 DOM 元素(又名 <input /> )，即使 React 不知道这一点( checkout this blog post on React's website )，也可以使这项工作正常进行。