解决React报错The tag is unrecognized in this browser
更新时间：2022年12月02日 14:59:56 作者：Borislav Hadzhiev
这篇文章主要为大家介绍了解决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就不会认为我们试图使用一个在浏览器中不存在的标签，而是知道我们在使用一个自定义组件。
以上就是解决React报错The tag is unrecognized in this browser的详细内容，更多关于React报错tag unrecognized的资料请关注脚本之家其它相关文章！
相关文章
本文主要介绍了react组件多次渲染问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家介绍了ReactJS中不同类型的状态详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了hooks中useEffect()使用总结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了react 不用插件实现数字滚动的效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
许多朋友遇到React Native 无法链接模拟器的问题，怎么解决呢，本文给大家分享完整简便解决方法及配置例题，对React Native 链接模拟器相关知识感兴趣的朋友一起看看吧2021-06-06
React Native系列之Recyclerlistview使用详解
这篇文章主要为大家介绍了React Native系列之Recyclerlistview使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
在React中，路由是一套映射规则，是URL路径与组件的对应关系。使用React路由，就是配置路径和组件的对应关系，这篇文章主要介绍了路由react-router-dom的使用,需要的朋友可以参考下2023-02-02
基于Webpack5 Module Federation的业务解耦实践示例
这篇文章主要为大家介绍了基于Webpack5 Module Federation的业务解耦实践示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
这篇文章主要为大家介绍了react定位组件源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
react反向代理使用http-proxy-middleware问题
这篇文章主要介绍了react反向代理使用http-proxy-middleware问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
最新评论