日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

解決React報錯Property?value?does?not?exist?on?type?HTMLElement_React

作者：Borislav?Hadzhiev ? 更新時間： 2022-12-29 編程語言

總覽

當我們試圖訪問一個類型為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-…

原文鏈接：https://juejin.cn/post/7136173375247876110

欄目分類
最近更新