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

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

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

总览

当我们试图访问一个类型为HTMLElement的元素上的value属性时，会产生"Property 'value' does not exist on type 'HTMLElement'"错误。为了解决该错误，在访问属性之前，使用类型断言将元素类型断言为HTMLInputElement。

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

// App.tsx
import {useEffect} from 'react';
export default function App() {
  useEffect(() => {
    const input = document.getElementById('message');
    // ⛔️ Property 'value' does not exist on type 'HTMLElement'.ts(2339)
    console.log(input?.value);
  }, []);
  return (
    <div>
      <input id="message" defaultValue="Initial value" />
    </div>
  );
}

我们得到错误的原因是因为，document.getElementById方法返回的类型为HTMLElement | null ，并且value属性不存在于HTMLElement类型上。

类型断言

为了解决该错误，使用类型断言将元素类型断言为HTMLInputElement（或者HTMLTextAreaElement，如果你使用textarea元素键入）。

import {useEffect} from 'react';
export default function App() {
  useEffect(() => {
    // ✅ type element as HTMLInputElement
    const input = document.getElementById('message') as HTMLInputElement;
    console.log(input?.value); // 👉️ "Initial value"
  }, []);
  return (
    <div>
      <input id="message" defaultValue="Initial value" />
    </div>
  );
}

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

// App.tsx
import {useEffect} from 'react';
export default function App() {
  useEffect(() => {
    // 👇️ inline type assertion
    const value = (document.getElementById('message') as HTMLInputElement).value;
    console.log(value);
  }, []);
  return (
    <div>
      <input id="message" defaultValue="Initial value" />
    </div>
  );
}

当我们拥有一个值的类型信息，但是TypeScript无从得知时，就会使用类型断言。

我们有效地告诉TypeScript，input变量存储了一个HTMLInputElement，不用担心它。

如果你正在使用一个textarea元素，你将使用HTMLTextAreaElement类型来代替。

联合类型

如果你想更精确地控制类型，你可以使用一个联合类型来设置类型为HTMLInputElement | null。

// App.tsx
import {useEffect} from 'react';
export default function App() {
  useEffect(() => {
    // ✅ type element as HTMLInputElement | null
    const input = document.getElementById('message') as HTMLInputElement | null;
    console.log(input?.value); // 👉️ "Initial value"
  }, []);
  return (
    <div>
      <input id="message" defaultValue="Initial value" />
    </div>
  );
}

HTMLInputElement | null类型是正确的，因为如果提供id的元素不存在于DOM中，document.getElementById()方法就会返回一个null值。

需要注意的是，我们使用了可选链（?.）操作符来短路运算，如果引用是空值的话（null或者undefined）。

换句话说，如果input变量存储了一个null值，我们就不会试图访问null的属性，而得到一个运行时错误。

类型守卫

你也可以使用一个简单的if语句作为类型守卫，以确保input变量不存储一个null值。

// App.tsx
import {useEffect} from 'react';
export default function App() {
  useEffect(() => {
    const input = document.getElementById('message') as HTMLInputElement | null;
    if (input != null) {
      console.log(input.value); // 👉️ "Initial value"
    }
  }, []);
  return (
    <div>
      <input id="message" defaultValue="Initial value" />
    </div>
  );
}

TypeScript知道input变量在if块中的类型是HTMLInputElement，并允许我们直接访问其value属性。

在类型断言中包含null总是一种最佳实践，因为如果没有找到所提供的id的元素，getElementById方法将返回null。

原文链接：bobbyhadz.com/blog/react-…

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

您可能感兴趣的文章:

相关文章

  • React代码分割的实现方法介绍

    React代码分割的实现方法介绍

    虽然一直有做react相关的优化,按需加载、dll 分离、服务端渲染,但是从来没有从路由代码分割这一块入手过,所以下面这篇文章主要给大家介绍了关于React中代码分割的方式,需要的朋友可以参考下
    2022-12-12
  • React配置多个代理实现数据请求返回问题

    React配置多个代理实现数据请求返回问题

    这篇文章主要介绍了React之配置多个代理实现数据请求返回问题，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • React Hook - 自定义Hook的基本使用和案例讲解

    React Hook - 自定义Hook的基本使用和案例讲解

    自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性，这篇文章主要介绍了React类组件和函数组件对比-Hooks的介绍及初体验,需要的朋友可以参考下
    2022-11-11
  • React高阶组件优化文件结构流程详解

    React高阶组件优化文件结构流程详解

    高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧
    2023-01-01
  • React学习之受控组件与数据共享实例分析

    React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下
    2020-01-01
  • 基于useImperativeHandle的使用解析

    基于useImperativeHandle的使用解析

    这篇文章主要介绍了基于useImperativeHandle的使用解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • React中useState原理的代码简单实现

    React中useState原理的代码简单实现

    要实现useState的背后原理,则需要深入了解状态是如何在函数组件的渲染周期中保持和更新的,本文将通过一段代码简单阐述useState钩子函数的实现思路,希望对大家有所帮助
    2023-12-12
  • React项目如何使用Element的方法步骤

    React项目如何使用Element的方法步骤

    本文主要介绍了React项目如何使用Element的方法步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • React BootStrap用户体验框架快速上手

    React BootStrap用户体验框架快速上手

    这篇文章主要介绍了React BootStrap用户体验框架快速上手的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03
  • react使用antd的上传组件实现文件表单一起提交功能(完整代码)

    react使用antd的上传组件实现文件表单一起提交功能(完整代码)

    最近在做一个后台管理项目，涉及到react相关知识，项目需求需要在表单中带附件提交，怎么实现这个功能呢？下面小编给大家带来了react使用antd的上传组件实现文件表单一起提交功能，一起看看吧
    2021-06-06

最新评论