快捷導(dǎo)航

解決React報(bào)錯(cuò)The?tag?is?unrecognized?in?this?browser

更新時(shí)間：2022年12月02日 14:59:56 作者：Borislav?Hadzhiev

這篇文章主要為大家介紹了解決React報(bào)錯(cuò)The?tag?is?unrecognized?in?this?browser示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們使用一個(gè)在瀏覽器中不存在的標(biāo)簽或以小寫(xiě)字母開(kāi)頭的組件名稱(chēng)時(shí)，會(huì)產(chǎn)生"The tag is unrecognized in this browser"React警告。為了解決該問(wèn)題，只使用有效的標(biāo)簽名稱(chēng)，并將你的組件的第一個(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)簽名稱(chēng)。比如說(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è)組件名稱(chēng)時(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組件的名稱(chēng)以小寫(xiě)字母開(kāi)頭。

所有的組件名稱(chēng)必須以大寫(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;

一旦我們將組件名稱(chēng)的第一個(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)文章！

您可能感興趣的文章: