解决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里就和js里的条件语句一样。下面这篇文章主要给大家介绍了关于React学习记录之条件渲染的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要介绍了详解Ant Design of React的安装和使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本篇文章主要介绍了React-Router如何进行页面权限管理的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了React如何实现全屏监听Esc键，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
React可以通过使用React事件系统来监听鼠标事件,您可以在React组件中通过使用特定的事件处理函数来注册和处理鼠标事件,本文小编讲给大家详细介绍一下如何在React中监听鼠标事件,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了如何对react hooks进行单元测试的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了前端 react 实现图片上传前压缩(缩率图),本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-08-08
这篇文章主要介绍了React配置代理服务器的5种方法,无论使用哪种方法,都需要确保代理服务器的地址和端口正确,并且在配置完成后重新启动React开发服务器,使配置生效,需要的朋友可以参考下2023-08-08
react拖拽react-beautiful-dnd一维数组二维数组拖拽功能
二维数组可以拖拽,但是不可以编辑+拖拽,如果想要实现编辑+拖拽,还是需要转换成一维数组,本文给大家介绍react拖拽react-beautiful-dnd的相关知识,感兴趣的朋友跟随小编一起看看吧2024-03-03
本章节，我们将一起探讨 React 中类组件和函数组件的定义，不同组件的通信方式，以及常规组件的强化方式，帮助你全方位认识 React 组件，从而对 React 的底层逻辑有进一步的理解，感兴趣的朋友跟随小编一起看看吧2023-06-06
最新评论