解决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报错Property does not exist on type 'JSX.IntrinsicElements'
- 解决React报错Property 'value' does not exist on type EventTarget
- 解决React报错Cannot assign to 'current' because it is a read-only property
- Can't perform a React state update on an unmounted component报错解决
- Objects are not valid as a React child报错解决
- 解决React报错No duplicate props allowed
- 解决React报错`value` prop on `input` should not be null
- 解决React报错Property 'X' does not exist on type 'HTMLElement'
相关文章
这篇文章主要介绍了React - ref 命令为什么代替父子组件的数据传递,使用 ref 之后，我们不需要再进行频繁的父子传递了，子组件也可以有自己的私有状态并且不会影响信息的正常需求，这是为什么呢？因为我们使用了 ref 命令的话，ref是可以进行状态的传输2022-08-08
React 中浅比较的概念无处不在，它在不同的流程中起着关键的作用，本文主要介绍了React 中的浅比较是如何工作的，具有一定的参考价值，感兴趣的可以了解一下2022-04-04
本文主要介绍了React如何通过useContext特性实现组件数据传递，文中有相关的代码示例供大家参考，对我们学习React有一定的帮助,需要的朋友可以参考下2023-06-06
本篇文章主要介绍了React组件内事件传参实现tab切换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
本篇文章主要介绍了React-Native 桥接iOS原生开发详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
ahooks封装cookie localStorage sessionStorage方法
这篇文章主要为大家介绍了ahooks封装cookie localStorage sessionStorage的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
颜色选择器是一个用于选择和调整颜色的工具,它可以让用户选择他们喜欢的颜色,本文主要介绍了React实现随机颜色选择器的示例代码,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
在React中,组件之间的数据传递通常是通过属性（Props）来实现的,父组件可以通过属性向子组件传递数据,这是React组件通信的基础模式之一,本文将探讨如何使用Props来实现父组件向子组件传递数据,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了React中常见的TypeScript定义实战,本文介绍了Fiber结构，Fiber的生成过程，调和过程，以及 render 和 commit 两大阶段，需要的朋友可以参考下2022-10-10
React如何使用错误边界(Error Boundaries)捕获组件错误
在 React 里,错误边界就像是一个“小卫士”,专门负责在组件出现错误时挺身而出,避免整个应用因为一个小错误就崩溃掉,下面小编就来为大家介绍一下如何利用它捕获组件错误吧2025-03-03
最新评论