解決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。

這里有個示例用來展示錯誤是如何發(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>
  );
}

我們得到錯誤的原因是因為，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>
  );
}

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

// 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類型來代替。

聯(lián)合類型

如果你想更精確地控制類型，你可以使用一個聯(lián)合類型來設置類型為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的屬性，而得到一個運行時錯誤。

類型守衛(wèi)

你也可以使用一個簡單的if語句作為類型守衛(wèi)，以確保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 報錯解決的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: