其他分享
首页 > 其他分享> > React报错之Property 'value' does not exist on type 'HTMLElement'

React报错之Property 'value' does not exist on type 'HTMLElement'

作者:互联网

正文从这开始~

总览

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

property-value-does-not-exist-on-type-htmlelement.png

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

// 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); // 

标签:useEffect,value,React,报错,类型,input,null,HTMLInputElement
来源: https://www.cnblogs.com/chuckQu/p/16629318.html