import React, { useRef, useState } from 'react'
...
const inputRef = useRef()
....
function chooseFile() {
  const { current } = inputRef
  (current || { click: () => {}}).click()
}
...
<input
   onChange={e => {
     setFile(e.target.files)
    }}
   id="select-file"
   type="file"
   ref={inputRef}
/>
<Button onClick={chooseFile} shadow icon="/upload.svg">
   Choose file
</Button>

使用next.js对我有效的唯一代码

更新:对象链接是一种访问可能为空或未定义引用的属性的方法

object?.objectProperty?.nextProperty

以前

if (object !== undefined) {
    // continue - error suppressed when used in this way.
}

以前

const objectX = object as string

不过，在选择上述解决方案之前，请考虑您的目标体系结构及其对大局的影响。

如果你知道该类型永远不会为null或未定义，你应该声明为foo: Bar，不带?类型声明?条形语法意味着它可能是未定义的，这是您需要检查的。

换句话说，编译器正在做你要求它做的事情。如果您希望它是可选的，您稍后需要检查。

这个特性被称为“strict null checks”，关闭它时要确保没有设置编译器标志——strictNullChecks。

然而，null的存在被描述为“十亿美元的错误”，所以看到像TypeScript这样的语言引入修复是令人兴奋的。我强烈建议你把它开着。

解决这个问题的一种方法是确保值永远不是null或undefined，例如通过预先初始化它们:

interface SelectProtected {
    readonly wrapperElement: HTMLDivElement;
    readonly inputElement: HTMLInputElement;
}

const selectProtected: SelectProtected = {
    wrapperElement: document.createElement("div"),
    inputElement: document.createElement("input")
};

不过，请参阅Ryan Cavanaugh的另一种选择的答案!

很惊讶没有人回答这个问题，你所要做的就是在访问它之前检查对象是否存在，这很直接。否则，请确保在访问对象之前初始化了您的值。

if($protected.listEle.classList) {
   $protected.listEle.classList.add('visible');
}

不是OPs问题，但我通过添加一个空检查来解决这个问题

我改变了:

*ngIf="username.invalid &&  username.errors.required"

To

*ngIf="username.invalid && username.errors != null && username.errors.required"