解決React報錯The?tag?is?unrecognized?in?this?browser

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

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

總覽

當我們使用一個在瀏覽器中不存在的標簽或以小寫字母開頭的組件名稱時，會產(chǎn)生"The tag is unrecognized in this browser"React警告。為了解決該問題，只使用有效的標簽名稱，并將你的組件的第一個字母大寫。

這里有個例子來展示錯誤是如何發(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標簽，但該標簽并不存在于瀏覽器中。

確保標簽存在

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

為了解決上述示例的錯誤，我們必須使用一個存在的標簽名稱。比如說，h1標簽或者p標簽。

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

小寫字母開頭

導致"The tag is unrecognized in this browser"警告的另一個原因是，當我們以小寫字母開頭一個組件名稱時。

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組件的名稱以小寫字母開頭。

所有的組件名稱必須以大寫字母開頭，因為這是React用來區(qū)分我們編寫的組件和存在于瀏覽器中的內(nèi)置標簽的慣例。

// ??? capitalize first letter
const Greet = () => {
  return <h2>Hello world</h2>;
};
const App = () => {
  return (
    <div>
      <div>
        <Greet />
      </div>
    </div>
  );
};
export default App;

一旦我們將組件名稱的第一個字母大寫，React就不會認為我們試圖使用一個在瀏覽器中不存在的標簽，而是知道我們在使用一個自定義組件。

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

您可能感興趣的文章: