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

學(xué)無先后，達者為師

網(wǎng)站首頁 編程語言 正文

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

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

總覽

當(dāng)我們試圖訪問一個類型為HTMLElement的元素上的value屬性時，會產(chǎn)生"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>
  );
}

你也可以在內(nèi)聯(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>
  );
}

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

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

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

聯(lián)合類型

如果你想更精確地控制類型，你可以使用一個聯(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類型是正確的，因為如果提供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-…

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

欄目分類
最近更新