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就不会认为我们试图使用一个在浏览器中不存在的标签，而是知道我们在使用一个自定义组件。