我多次遇到"Object is albably null"错误,通常我会使用一个安全的"if语句"以防它返回null.

我有以下功能:

const ModalOverlay = (props: any[]) => {
  const overlayEl = useRef(null);
    useEffect(() => {
    overlayEl.current.focus();
    });
    return <div {...props} ref={overlayEl} />;
  }

overlayEl.current得到错误"对象未定义".所以我试过:

if (!overlayEl) {
    return null
  } else {
    useEffect(() => {
    overlayEl.current.focus();
    });
    return <div {...props} ref={overlayEl} />;
  }

这没用.我也试过:

overlay && overlayEl.current.focus();

任何提示都将不胜感激!谢谢

推荐答案

当您声明const overlayEl=useRef(null)时;

try

 const overlayEl = useRef<HTMLDivElement>(null);

或者,如果你不在乎什么时候它的未定义是做这样的事情,可以使用一些语法.

const overlayEl = useRef(document.createElement("div"))

使用上述语法,所有常见的DOM方法只返回默认值,例如"0",即overlayEl.offsetWidth、getBoundingClientRect等.

用法:

if(overlayEl.current) {
    // will be type HTMLDivElement NOT HTMLDivElement | null
    const whattype = overlayEl.current; 
}

这样做的方式是typescripts静态分析足够聪明,可以计算出if个check"guards"来防止null,因此它将从这些括号中的null | HTMLDivElement的并集中删除该类型.

Typescript相关问答推荐

如何准确确定此特定场景中的类型?

Angular -使用Phone Directive将值粘贴到控件以格式化值时验证器不工作

如何传递基于TypScript中可变类型的类型?

typescribe不能使用值来索引对象类型,该对象类型满足具有该值的另一个类型'

TypeScript类型不匹配:在返回类型中处理已经声明的Promise Wrapper

当我点击外部按钮时,如何打开Html Select 选项菜单?

向NextAuth会话添加除名称、图像和ID之外的更多详细信息

TypeScrip:逐个 case Select 退出noUncheck kedIndexedAccess

类型脚本返回的类型包含无意义的泛型类型名称

TypeScrip:来自先前参数的参数中的计算(computed)属性名称

获取一个TypeScrip对象,并将每个属性转换为独立对象的联合

在列表的指令中使用intersectionObservable隐藏按钮

为什么TypeScrip不能解析对象析构中的赋值?

作为函数参数的联合类型的键

在构建Angular 应用程序时,有没有办法通过CLI传递参数?

如何调整项目数组,但允许权重影响顺序

有没有一种方法可以防止我的组件包在其中安装样式组件'; node 模块中的s目录

通过函数传递确切的类型,但验证额外的字段

Typescript循环函数引用

如何通过nx找到所有受影响的项目?