脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React报错解决Property X

解决React报错Property 'X' does not exist on type 'HTMLElement'

 更新时间：2022年12月05日 10:27:47   作者：Borislav Hadzhiev  
这篇文章主要为大家介绍了解决React报错Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

总览

在React中，当我们试图访问类型为HTMLElement 的元素上不存在的属性时，就会发生Property 'X' does not exist on type 'HTMLElement'错误。为了解决该错误，在访问属性之前，使用类型断言来正确地类型声明元素。

这里有三个例子来展示错误是如何发生的。

// App.tsx
import {useEffect} from 'react';
export default function App() {
  useEffect(() => {
    const input = document.getElementById('first_name');
    // ⛔️ Property 'value' does not exist on type 'HTMLElement'.ts(2339)
    console.log(input?.value);
    // -----------------------------------------------------------------
    const link = document.getElementById('link');
    // ⛔️ Property 'href' does not exist on type 'HTMLElement'.ts(2339)
    console.log(link?.href);
    // -----------------------------------------------------------------
    const button = document.getElementById('btn');
    if (button != null) {
      // ⛔️ Property 'disabled' does not exist on type 'HTMLElement'.ts(2339)
      button.disabled = true;
    }
  }, []);
  return (
    <div>
      <input
        id="first_name"
        type="text"
        name="first_name"
        defaultValue="Initial Value"
      />
      <a id="link" href="<https://google.com>" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank" rel="noreferrer">
        Open Google
      </a>
      <button id="btn">Submit</button>
    </div>
  );
}

产生错误的原因是，document.getElementById方法的返回类型是HTMLElement | null，但是我们试图访问的属性不存在于HTMLElement 类型。

类型断言

为了解决这个错误，使用类型断言来为元素正确地进行类型声明。比如说，类型断言为HTMLInputElement, HTMLButtonElement, HTMLAnchorElement, HTMLImageElement, HTMLDivElement, HTMLTextAreaElement等等。这取决于你所处理的元素。

这些类型始终命名为HTML***Element 。一旦你开始输入HTML…，你的IDE将会帮你自动补全。

import {useEffect} from 'react';
export default function App() {
  useEffect(() => {
    // ✅ type elements correctly via type assertions
    const input = document.getElementById('first_name') as HTMLInputElement;
    console.log(input?.value);
    const link = document.getElementById('link') as HTMLAnchorElement;
    console.log(link?.href);
    const button = document.getElementById('btn') as HTMLButtonElement;
    if (button != null) {
      button.disabled = true;
    }
  }, []);
  return (
    <div>
      <input
        id="first_name"
        type="text"
        name="first_name"
        defaultValue="Initial Value"
      />
      <a id="link" href="<https://google.com>" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank" rel="noreferrer">
        Open Google
      </a>
      <button id="btn">Submit</button>
    </div>
  );
}

类型断言被用于我们知道值的类型信息，但是TypeScript却不知道的时候。

我们明确的告诉TypeScript，input变量上存储了HTMLInputElement ，并让TS不要担心。

同样的，我们将link变量类型声明为HTMLAnchorElement，将btn变量类型声明为HTMLButtonElement 。

你可以在访问一个属性之前，内联使用类型断言。

import {useEffect} from 'react';
export default function App() {
  useEffect(() => {
    const value = (document.getElementById('first_name') as HTMLInputElement).value;
    console.log(value);
  }, []);
  return (
    <div>
      <input
        id="first_name"
        type="text"
        name="first_name"
        defaultValue="Initial Value"
      />
      <a id="link" href="<https://google.com>" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank" rel="noreferrer">
        Open Google
      </a>
      <button id="btn">Submit</button>
    </div>
  );
}

如果你只需要访问属性一次，并且不希望将元素分配给变量，那么内联类型声明可以完成这项工作。

如果你想更精确地处理元素的类型，可以使用联合类型将类型声明为HTML***Element | null 。

import {useEffect} from 'react';
export default function App() {
  useEffect(() => {
    const input = document.getElementById(
      'first_name',
    ) as HTMLInputElement | null;
    console.log(input?.value);
    const link = document.getElementById('link') as HTMLAnchorElement | null;
    console.log(link?.href);
    const button = document.getElementById('btn') as HTMLButtonElement | null;
    if (button != null) {
      button.disabled = true;
    }
  }, []);
  return (
    <div>
      <input
        id="first_name"
        type="text"
        name="first_name"
        defaultValue="Initial Value"
      />
      <a id="link" href="<https://google.com>" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank" rel="noreferrer">
        Open Google
      </a>
      <button id="btn">Submit</button>
    </div>
  );
}

HTML***Element 或者null 类型是最准确的类型，因为如果DOM元素上不存在id属性，那么document.getElementById()将会返回null。

你可以使用可选链操作符(?.)在访问属性之前来进行短路运算，如果引用是空值（null或者undefined）的话。

或者，你可以使用简单的if语句作为类型守卫，就像我们对button处理的那样。

总结

最佳实践是在类型断言中包含null 。因为如果元素上面不提供id属性，那么getElementById方法将会返回null。

以上就是解决React报错Property 'X' does not exist on type 'HTMLElement'的详细内容，更多关于React报错解决Property X的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • React+umi+typeScript创建项目的过程

    React+umi+typeScript创建项目的过程

    这篇文章主要介绍了React+umi+typeScript创建项目的过程,结合代码介绍了项目框架搭建的方式，本文给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-02-02
  • 深入理解React高阶组件

    深入理解React高阶组件

    本篇文章主要介绍了深入理解React高阶组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 使用React-Router实现前端路由鉴权的示例代码

    使用React-Router实现前端路由鉴权的示例代码

    这篇文章主要介绍了使用React-Router实现前端路由鉴权的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 详解react-refetch的使用小例子

    详解react-refetch的使用小例子

    这篇文章主要介绍了详解react-refetch的使用小例子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • React使用useEffect解决setState副作用详解

    React使用useEffect解决setState副作用详解

    这篇文章主要为大家介绍了React使用useEffect解决setState副作用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • react中props 的使用及进行限制的方法

    react中props 的使用及进行限制的方法

    这篇文章主要介绍了react中的props 的使用及进行限制的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • antd4里table滚动的实现

    antd4里table滚动的实现

    本文主要介绍了antd4里table滚动的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • react组件memo useMemo useCallback使用区别示例

    react组件memo useMemo useCallback使用区别示例

    这篇文章主要为大家介绍了react组件memo useMemo useCallback使用区别的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 详解React  App.js 文件的结构和作用

    详解React  App.js 文件的结构和作用

    在React应用中,App.js文件通常是项目的根组件文件,它负责组织和渲染其他组件,是应用的核心部分,本文将详细介绍App.js文件的结构、作用和最佳实践,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • React之使用useState异步刷新的问题

    React之使用useState异步刷新的问题

    这篇文章主要介绍了React之使用useState异步刷新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论