React报错之The tag is unrecognized in this browser
2023-02-18 16:41:38 时间
正文从这开始~
总览
当我们使用一个在浏览器中不存在的标签或以小写字母开头的组件名称时,会产生"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就不会认为我们试图使用一个在浏览器中不存在的标签,而是知道我们在使用一个自定义组件。
相关文章
- Redis持久化: RDB&AOF
- [PHP] php作为websocket的客户端实时读取推送日志文件
- [MySQL] in 子查询出现DEPENDENT SUBQUERY问题
- [MySQL] 导入数据时防止出现乱码
- [MySQL] group by 聚合函数的原理和聚合限制原因SELECT list is not in GROUP BY clause and contains nonaggregated column
- [PHP] websocket协议的生成
- [MySQL]mysql的ANY_VALUE()函数 解决 ONLY_FULL_GROUP_BY 模式
- [PHP] 框架中.env文件的加载过程
- [PHP] PHP7已经删除了preg_replace的e修饰符
- [日常]解决Connection to `ssl://pecl.php.net:443' failed
- [日常]k8s的前世今生
- [日常]windows下kill进程工具taskkill
- [CSS] 纯CSS的前端图标icon库并且修改大小和颜色
- [PHP] php中的索引数组和数组顺序问题
- [PHP] RBAC权限与审批流的简单数据库构想
- [日常] 修改编辑word中的页眉页脚
- [PHP] socket客户端时的超时问题
- [nginx]配置nginx支持websocket解决返回400错误问题
- [nginx]配置nginx支持websocket解决返回400错误问题
- [PHP] php5.3之前-php5.3-php7垃圾回收机制的进化