欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決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屬性時,會產(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>
  );
}

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

我們有效地告訴TypeScript,input變量存儲了一個HTMLInputElement,不用擔心它。

如果你正在使用一個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-…

以上就是解決React報錯Property value does not exist on type HTMLElement的詳細內(nèi)容,更多關(guān)于React 報錯解決的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • React代碼分割的實現(xiàn)方法介紹

    React代碼分割的實現(xiàn)方法介紹

    雖然一直有做react相關(guān)的優(yōu)化,按需加載、dll 分離、服務(wù)端渲染,但是從來沒有從路由代碼分割這一塊入手過,所以下面這篇文章主要給大家介紹了關(guān)于React中代碼分割的方式,需要的朋友可以參考下
    2022-12-12
  • React配置多個代理實現(xiàn)數(shù)據(jù)請求返回問題

    React配置多個代理實現(xiàn)數(shù)據(jù)請求返回問題

    這篇文章主要介紹了React之配置多個代理實現(xiàn)數(shù)據(jù)請求返回問題,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • React Hook - 自定義Hook的基本使用和案例講解

    React Hook - 自定義Hook的基本使用和案例講解

    自定義Hook本質(zhì)上只是一種函數(shù)代碼邏輯的抽取,嚴格意義上來說,它本身并不算React的特性,這篇文章主要介紹了React類組件和函數(shù)組件對比-Hooks的介紹及初體驗,需要的朋友可以參考下
    2022-11-11
  • React高階組件優(yōu)化文件結(jié)構(gòu)流程詳解

    React高階組件優(yōu)化文件結(jié)構(gòu)流程詳解

    高階組件就是接受一個組件作為參數(shù)并返回一個新組件(功能增強的組件)的函數(shù)。這里需要注意高階組件是一個函數(shù),并不是組件,這一點一定要注意,本文給大家分享React 高階組件HOC使用小結(jié),一起看看吧
    2023-01-01
  • React學習之受控組件與數(shù)據(jù)共享實例分析

    React學習之受控組件與數(shù)據(jù)共享實例分析

    這篇文章主要介紹了React學習之受控組件與數(shù)據(jù)共享,結(jié)合實例形式分析了React受控組件與組件間數(shù)據(jù)共享相關(guān)原理與使用技巧,需要的朋友可以參考下
    2020-01-01
  • 基于useImperativeHandle的使用解析

    基于useImperativeHandle的使用解析

    這篇文章主要介紹了基于useImperativeHandle的使用解析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • React中useState原理的代碼簡單實現(xiàn)

    React中useState原理的代碼簡單實現(xiàn)

    要實現(xiàn)useState的背后原理,則需要深入了解狀態(tài)是如何在函數(shù)組件的渲染周期中保持和更新的,本文將通過一段代碼簡單闡述useState鉤子函數(shù)的實現(xiàn)思路,希望對大家有所幫助
    2023-12-12
  • React項目如何使用Element的方法步驟

    React項目如何使用Element的方法步驟

    本文主要介紹了React項目如何使用Element的方法步驟,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • React BootStrap用戶體驗框架快速上手

    React BootStrap用戶體驗框架快速上手

    這篇文章主要介紹了React BootStrap用戶體驗框架快速上手的相關(guān)知識,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-03-03
  • react使用antd的上傳組件實現(xiàn)文件表單一起提交功能(完整代碼)

    react使用antd的上傳組件實現(xiàn)文件表單一起提交功能(完整代碼)

    最近在做一個后臺管理項目,涉及到react相關(guān)知識,項目需求需要在表單中帶附件提交,怎么實現(xiàn)這個功能呢?下面小編給大家?guī)砹藃eact使用antd的上傳組件實現(xiàn)文件表單一起提交功能,一起看看吧
    2021-06-06

最新評論