日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：Borislav?Hadzhiev ? 更新時間： 2022-12-30 編程語言

總覽

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

這里有個例子來展示錯誤是如何發生的。

// 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用來區分我們編寫的組件和存在于瀏覽器中的內置標簽的慣例。

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

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

原文鏈接：https://juejin.cn/post/7130247174687817759

欄目分類
最近更新