ReactJS / TypeScript-属性'file'在类型'HTMLElement'错误时不存在

Posted 2021-05-03

我正在使用ts做一个React应用，并且我有这段返回错误的代码：

  const blobfile = document.getElementById('blobFile');
  if ( blobfile !== null ) {
     const file = blobfile.files[0];
  }

错误是：

Property 'files' does not exist on type 'htmlElement'

我尝试了这个但没有用：

const file = (<HTMLInputElement>document.getElementById('blobFile')).files[0];

此错误是：

JSX element type 'HTMLInputElement' is not a constructor function for JSX elements.
  Type 'HTMLInputElement' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.ts(2605)
JSX element 'HTMLInputElement' has no corresponding closing tag.ts(17008)

我该如何解决？

谢谢

答案

这是一个多部分的答案

第1部分]]

如果使用的是React，则没有理由使用getElementById。您应该使用文件输入的onChange事件

const onFileChange = (e: ChangeEvent<HTMLInputElement>): void => {
    console.log(e.target.files)
}

<input type="file" onChange={onFileChange} />
第2部分

您的类型转换错误。键入强制转换的想法是可以的，但不是严格正确的，getElementById可能返回null。

const fileElement = document.getElementById('blobFile') as HTMLInputElement
if (fileElement) {
    console.log(fileElement.files)
}

另一答案

您的类型转换不起作用，因为您正在使用tsx，因此类型转换是模棱两可的（打字稿无法告诉您是在进行类型转换还是试图实例化组件）。相反，您应该使用as TypeToCastTo

另一答案

非常感谢您，莱昂和迈克尔！