解決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)簽或以小寫字母開頭的組件名稱時(shí)，會產(chǎn)生"The tag is unrecognized in this browser"React警告。為了解決該問題，只使用有效的標(biāo)簽名稱，并將你的組件的第一個(gè)字母大寫。

這里有個(gè)例子來展示錯(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;

上述代碼的問題在于，我們使用了p1標(biāo)簽，但該標(biāo)簽并不存在于瀏覽器中。

確保標(biāo)簽存在

我們必須確保只使用受支持的標(biāo)簽。你可以在這里查看所有Web支持的標(biāo)簽。你可以通過使用CTRL + F來檢查一個(gè)特定的標(biāo)簽是否存在，并查找該標(biāo)簽，例如<li>。

為了解決上述示例的錯(cuò)誤，我們必須使用一個(gè)存在的標(biāo)簽名稱。比如說，h1標(biāo)簽或者p標(biāo)簽。

const App = () => {
  return (
    <div>
      <div>
        <h1>Hello world</h1>
      </div>
    </div>
  );
};
export default App;

小寫字母開頭

導(dǎo)致"The tag is unrecognized in this browser"警告的另一個(gè)原因是，當(dāng)我們以小寫字母開頭一個(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;

上述代碼的問題在于，greet組件的名稱以小寫字母開頭。

所有的組件名稱必須以大寫字母開頭，因?yàn)檫@是React用來區(qū)分我們編寫的組件和存在于瀏覽器中的內(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è)字母大寫，React就不會認(rèn)為我們試圖使用一個(gè)在瀏覽器中不存在的標(biāo)簽，而是知道我們在使用一個(gè)自定義組件。

以上就是解決React報(bào)錯(cuò)The tag is unrecognized in this browser的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)tag unrecognized的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: