解決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)文章!
- 解決React報錯Property does not exist on type 'JSX.IntrinsicElements'
- 解決React報錯Property?'value'?does?not?exist?on?type?EventTarget
- 解決React報錯Cannot assign to 'current' because it is a read-only property
- Can't?perform?a?React?state?update?on?an?unmounted?component報錯解決
- Objects are not valid as a React child報錯解決
- 解決React報錯No duplicate props allowed
- 解決React報錯`value` prop on `input` should not be null
- 解決React報錯Property 'X' does not exist on type 'HTMLElement'
相關(guān)文章
React配置多個代理實現(xiàn)數(shù)據(jù)請求返回問題
這篇文章主要介紹了React之配置多個代理實現(xiàn)數(shù)據(jù)請求返回問題,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08React Hook - 自定義Hook的基本使用和案例講解
自定義Hook本質(zhì)上只是一種函數(shù)代碼邏輯的抽取,嚴格意義上來說,它本身并不算React的特性,這篇文章主要介紹了React類組件和函數(shù)組件對比-Hooks的介紹及初體驗,需要的朋友可以參考下2022-11-11React高階組件優(yōu)化文件結(jié)構(gòu)流程詳解
高階組件就是接受一個組件作為參數(shù)并返回一個新組件(功能增強的組件)的函數(shù)。這里需要注意高階組件是一個函數(shù),并不是組件,這一點一定要注意,本文給大家分享React 高階組件HOC使用小結(jié),一起看看吧2023-01-01React學習之受控組件與數(shù)據(jù)共享實例分析
這篇文章主要介紹了React學習之受控組件與數(shù)據(jù)共享,結(jié)合實例形式分析了React受控組件與組件間數(shù)據(jù)共享相關(guān)原理與使用技巧,需要的朋友可以參考下2020-01-01react使用antd的上傳組件實現(xiàn)文件表單一起提交功能(完整代碼)
最近在做一個后臺管理項目,涉及到react相關(guān)知識,項目需求需要在表單中帶附件提交,怎么實現(xiàn)這個功能呢?下面小編給大家?guī)砹藃eact使用antd的上傳組件實現(xiàn)文件表單一起提交功能,一起看看吧2021-06-06