React中使用<labal>标签出现浏览器无法识别警告该如何解决？

根本原因 #

你将HTML原生表单标签<label>拼写错误为<labal>，该字符串不存在于浏览器支持的原生标签列表中，因此触发React的报错提示。

解决方法 #

• 全局搜索代码中所有labal字段，将错误拼写的标签统一替换为正确的<label>
• 若修改后热更新未同步，重启本地开发服务即可清除警告

报错逻辑说明 #

你收到的警告底层逻辑是React的标签识别规则：

The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter
React默认将小写开头的标签判定为浏览器原生DOM标签，如果你确实要渲染自定义组件，需要将组件名首字母大写，否则就会抛出该类未识别标签警告。

内容的提问来源于stack exchange，提问作者smrakib