解決React報(bào)錯(cuò)The?tag?is?unrecognized?in?this?browser
總覽
當(dāng)我們使用一個(gè)在瀏覽器中不存在的標(biāo)簽或以小寫(xiě)字母開(kāi)頭的組件名稱時(shí)，會(huì)產(chǎn)生"The tag is unrecognized in this browser"React警告。為了解決該問(wèn)題，只使用有效的標(biāo)簽名稱，并將你的組件的第一個(gè)字母大寫(xiě)。
這里有個(gè)例子來(lái)展示錯(cuò)誤是如何發(fā)生的。
// App.js
const App = () => {
// ?? Warning: The tag <p1> is unrecognized in this browser.
// If you meant to render a React component, start its name with an uppercase letter.
return (
<div>
<div>
<p1>Hello world</p1>
</div>
</div>
);
};
export default App;
上述代碼的問(wèn)題在于，我們使用了p1標(biāo)簽，但該標(biāo)簽并不存在于瀏覽器中。
確保標(biāo)簽存在
我們必須確保只使用受支持的標(biāo)簽。你可以在這里查看所有Web支持的標(biāo)簽。你可以通過(guò)使用CTRL + F來(lái)檢查一個(gè)特定的標(biāo)簽是否存在，并查找該標(biāo)簽，例如<li>。
為了解決上述示例的錯(cuò)誤，我們必須使用一個(gè)存在的標(biāo)簽名稱。比如說(shuō)，h1標(biāo)簽或者p標(biāo)簽。
const App = () => {
return (
<div>
<div>
<h1>Hello world</h1>
</div>
</div>
);
};
export default App;
小寫(xiě)字母開(kāi)頭
導(dǎo)致"The tag is unrecognized in this browser"警告的另一個(gè)原因是，當(dāng)我們以小寫(xiě)字母開(kāi)頭一個(gè)組件名稱時(shí)。
const greet = () => {
return <h2>Hello world</h2>;
};
const App = () => {
// ?? Warning: The tag <greet> is unrecognized in this browser.
// If you meant to render a React component, start its name with an uppercase letter.
return (
<div>
<div>
<greet />
</div>
</div>
);
};
export default App;
上述代碼的問(wèn)題在于，greet組件的名稱以小寫(xiě)字母開(kāi)頭。
所有的組件名稱必須以大寫(xiě)字母開(kāi)頭，因?yàn)檫@是React用來(lái)區(qū)分我們編寫(xiě)的組件和存在于瀏覽器中的內(nèi)置標(biāo)簽的慣例。
// ??? capitalize first letter
const Greet = () => {
return <h2>Hello world</h2>;
};
const App = () => {
return (
<div>
<div>
<Greet />
</div>
</div>
);
};
export default App;
一旦我們將組件名稱的第一個(gè)字母大寫(xiě)，React就不會(huì)認(rèn)為我們?cè)噲D使用一個(gè)在瀏覽器中不存在的標(biāo)簽，而是知道我們?cè)谑褂靡粋€(gè)自定義組件。
以上就是解決React報(bào)錯(cuò)The tag is unrecognized in this browser的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)tag unrecognized的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
條件渲染在React里就和js里的條件語(yǔ)句一樣。下面這篇文章主要給大家介紹了關(guān)于React學(xué)習(xí)記錄之條件渲染的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
這篇文章主要介紹了詳解Ant Design of React的安裝和使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
React-Router如何進(jìn)行頁(yè)面權(quán)限管理的方法
本篇文章主要介紹了React-Router如何進(jìn)行頁(yè)面權(quán)限管理的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
React如何實(shí)現(xiàn)全屏監(jiān)聽(tīng)Esc鍵
這篇文章主要介紹了React如何實(shí)現(xiàn)全屏監(jiān)聽(tīng)Esc鍵，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解如何在React中監(jiān)聽(tīng)鼠標(biāo)事件
React可以通過(guò)使用React事件系統(tǒng)來(lái)監(jiān)聽(tīng)鼠標(biāo)事件,您可以在React組件中通過(guò)使用特定的事件處理函數(shù)來(lái)注冊(cè)和處理鼠標(biāo)事件,本文小編講給大家詳細(xì)介紹一下如何在React中監(jiān)聽(tīng)鼠標(biāo)事件,需要的朋友可以參考下2023-09-09
如何對(duì)react hooks進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了如何對(duì)react hooks進(jìn)行單元測(cè)試的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
前端 react 實(shí)現(xiàn)圖片上傳前壓縮(縮率圖)
這篇文章主要介紹了前端 react 實(shí)現(xiàn)圖片上傳前壓縮(縮率圖),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
React配置代理服務(wù)器的5種方法及使用場(chǎng)景
這篇文章主要介紹了React配置代理服務(wù)器的5種方法,無(wú)論使用哪種方法,都需要確保代理服務(wù)器的地址和端口正確,并且在配置完成后重新啟動(dòng)React開(kāi)發(fā)服務(wù)器,使配置生效,需要的朋友可以參考下2023-08-08
react拖拽react-beautiful-dnd一維數(shù)組二維數(shù)組拖拽功能
二維數(shù)組可以拖拽,但是不可以編輯+拖拽,如果想要實(shí)現(xiàn)編輯+拖拽,還是需要轉(zhuǎn)換成一維數(shù)組,本文給大家介紹react拖拽react-beautiful-dnd的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧2024-03-03
本章節(jié)，我們將一起探討 React 中類(lèi)組件和函數(shù)組件的定義，不同組件的通信方式，以及常規(guī)組件的強(qiáng)化方式，幫助你全方位認(rèn)識(shí) React 組件，從而對(duì) React 的底層邏輯有進(jìn)一步的理解，感興趣的朋友跟隨小編一起看看吧2023-06-06