解決React報(bào)錯(cuò)Property value does not exist on type HTMLElement

更新時(shí)間：2022年12月01日 15:47:02 作者：Borislav Hadzhiev

這篇文章主要為大家介紹了React報(bào)錯(cuò)Property value does not exist on type HTMLElement解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們?cè)噲D訪問一個(gè)類型為HTMLElement的元素上的value屬性時(shí)，會(huì)產(chǎn)生"Property 'value' does not exist on type 'HTMLElement'"錯(cuò)誤。為了解決該錯(cuò)誤，在訪問屬性之前，使用類型斷言將元素類型斷言為HTMLInputElement。

這里有個(gè)示例用來展示錯(cuò)誤是如何發(fā)生的。

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

我們得到錯(cuò)誤的原因是因?yàn)椋?a rel="external nofollow" target="_blank">document.getElementById方法返回的類型為HTMLElement | null ，并且value屬性不存在于HTMLElement類型上。

類型斷言

為了解決該錯(cuò)誤，使用類型斷言將元素類型斷言為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>
  );
}

你也可以在內(nèi)聯(lián)中使用一個(gè)類型斷言，就在訪問值屬性之前。

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

當(dāng)我們擁有一個(gè)值的類型信息，但是TypeScript無從得知時(shí)，就會(huì)使用類型斷言。

我們有效地告訴TypeScript，input變量存儲(chǔ)了一個(gè)HTMLInputElement，不用擔(dān)心它。

如果你正在使用一個(gè)textarea元素，你將使用HTMLTextAreaElement類型來代替。

聯(lián)合類型

如果你想更精確地控制類型，你可以使用一個(gè)聯(lián)合類型來設(shè)置類型為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類型是正確的，因?yàn)槿绻峁﹊d的元素不存在于DOM中，document.getElementById()方法就會(huì)返回一個(gè)null值。

需要注意的是，我們使用了可選鏈（?.）操作符來短路運(yùn)算，如果引用是空值的話（null或者undefined）。

換句話說，如果input變量存儲(chǔ)了一個(gè)null值，我們就不會(huì)試圖訪問null的屬性，而得到一個(gè)運(yùn)行時(shí)錯(cuò)誤。

類型守衛(wèi)

你也可以使用一個(gè)簡(jiǎn)單的if語句作為類型守衛(wèi)，以確保input變量不存儲(chǔ)一個(gè)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總是一種最佳實(shí)踐，因?yàn)槿绻麤]有找到所提供的id的元素，getElementById方法將返回null。

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

以上就是解決React報(bào)錯(cuò)Property value does not exist on type HTMLElement的詳細(xì)內(nèi)容，更多關(guān)于React 報(bào)錯(cuò)解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: