解決React報(bào)錯(cuò)Property value does not exist on type HTMLElement
總覽
當(dāng)我們?cè)噲D訪問(wèn)一個(gè)類型為HTMLElement
的元素上的value
屬性時(shí),會(huì)產(chǎn)生"Property 'value' does not exist on type 'HTMLElement'"錯(cuò)誤。為了解決該錯(cuò)誤,在訪問(wèn)屬性之前,使用類型斷言將元素類型斷言為HTMLInputElement
。
這里有個(gè)示例用來(lái)展示錯(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è)類型斷言,就在訪問(wè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)我們擁有一個(gè)值的類型信息,但是TypeScript無(wú)從得知時(shí),就會(huì)使用類型斷言。
我們有效地告訴TypeScript,input
變量存儲(chǔ)了一個(gè)HTMLInputElement
,不用擔(dān)心它。
如果你正在使用一個(gè)textarea
元素,你將使用HTMLTextAreaElement
類型來(lái)代替。
聯(lián)合類型
如果你想更精確地控制類型,你可以使用一個(gè)聯(lián)合類型來(lái)設(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
值。
需要注意的是,我們使用了可選鏈(?.
)操作符來(lái)短路運(yùn)算,如果引用是空值的話(null
或者undefined
)。
換句話說(shuō),如果input
變量存儲(chǔ)了一個(gè)null
值,我們就不會(huì)試圖訪問(wèn)null
的屬性,而得到一個(gè)運(yùn)行時(shí)錯(cuò)誤。
類型守衛(wèi)
你也可以使用一個(gè)簡(jiǎn)單的if
語(yǔ)句作為類型守衛(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
,并允許我們直接訪問(wèn)其value
屬性。
在類型斷言中包含null
總是一種最佳實(shí)踐,因?yàn)槿绻麤](méi)有找到所提供的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)文章!
- 解決React報(bào)錯(cuò)Property does not exist on type 'JSX.IntrinsicElements'
- 解決React報(bào)錯(cuò)Property?'value'?does?not?exist?on?type?EventTarget
- 解決React報(bào)錯(cuò)Cannot assign to 'current' because it is a read-only property
- Can't?perform?a?React?state?update?on?an?unmounted?component報(bào)錯(cuò)解決
- Objects are not valid as a React child報(bào)錯(cuò)解決
- 解決React報(bào)錯(cuò)No duplicate props allowed
- 解決React報(bào)錯(cuò)`value` prop on `input` should not be null
- 解決React報(bào)錯(cuò)Property 'X' does not exist on type 'HTMLElement'
相關(guān)文章
React配置多個(gè)代理實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求返回問(wèn)題
這篇文章主要介紹了React之配置多個(gè)代理實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求返回問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08React Hook - 自定義Hook的基本使用和案例講解
自定義Hook本質(zhì)上只是一種函數(shù)代碼邏輯的抽取,嚴(yán)格意義上來(lái)說(shuō),它本身并不算React的特性,這篇文章主要介紹了React類組件和函數(shù)組件對(duì)比-Hooks的介紹及初體驗(yàn),需要的朋友可以參考下2022-11-11React高階組件優(yōu)化文件結(jié)構(gòu)流程詳解
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件(功能增強(qiáng)的組件)的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù),并不是組件,這一點(diǎn)一定要注意,本文給大家分享React 高階組件HOC使用小結(jié),一起看看吧2023-01-01React學(xué)習(xí)之受控組件與數(shù)據(jù)共享實(shí)例分析
這篇文章主要介紹了React學(xué)習(xí)之受控組件與數(shù)據(jù)共享,結(jié)合實(shí)例形式分析了React受控組件與組件間數(shù)據(jù)共享相關(guān)原理與使用技巧,需要的朋友可以參考下2020-01-01React中useState原理的代碼簡(jiǎn)單實(shí)現(xiàn)
要實(shí)現(xiàn)useState的背后原理,則需要深入了解狀態(tài)是如何在函數(shù)組件的渲染周期中保持和更新的,本文將通過(guò)一段代碼簡(jiǎn)單闡述useState鉤子函數(shù)的實(shí)現(xiàn)思路,希望對(duì)大家有所幫助2023-12-12React項(xiàng)目如何使用Element的方法步驟
本文主要介紹了React項(xiàng)目如何使用Element的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11React BootStrap用戶體驗(yàn)框架快速上手
這篇文章主要介紹了React BootStrap用戶體驗(yàn)框架快速上手的相關(guān)知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03react使用antd的上傳組件實(shí)現(xiàn)文件表單一起提交功能(完整代碼)
最近在做一個(gè)后臺(tái)管理項(xiàng)目,涉及到react相關(guān)知識(shí),項(xiàng)目需求需要在表單中帶附件提交,怎么實(shí)現(xiàn)這個(gè)功能呢?下面小編給大家?guī)?lái)了react使用antd的上傳組件實(shí)現(xiàn)文件表單一起提交功能,一起看看吧2021-06-06