关于react.js:React报错之The-tag-is-unrecognized-in-this-browser

注释从这开始~

总览

当咱们应用一个在浏览器中不存在的标签或以小写字母结尾的组件名称时，会产生 ”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 就不会认为咱们试图应用一个在浏览器中不存在的标签，而是晓得咱们在应用一个自定义组件。