正文从这开始~
总览
当我们使用一个在浏览器中不存在的标签或以小写字母开头的组件名称时,会产生"The tag is unrecognized in this browser"React警告。为了解决该问题,只使用有效的标签名称,并将你的组件的第一个字母大写。
文章图片
这里有个例子来展示错误是如何发生的。
// App.js
const App = () => {
// ?? Warning: The tag is unrecognized in this browser.
// If you meant to render a React component, start its name with an uppercase letter.
return (Hello world);
};
export default App;
上述代码的问题在于,我们使用了
p1
标签,但该标签并不存在于浏览器中。确保标签存在 我们必须确保只使用受支持的标签。你可以在这里查看所有Web支持的标签。你可以通过使用CTRL + F来检查一个特定的标签是否存在,并查找该标签,例如
。为了解决上述示例的错误,我们必须使用一个存在的标签名称。比如说,
h1
标签或者p
标签。const App = () => {
return (Hello world);
};
export default App;
小写字母开头 导致"The tag is unrecognized in this browser"警告的另一个原因是,当我们以小写字母开头一个组件名称时。
const greet = () => {
return Hello world;
};
const App = () => {
// ?? Warning: The tag is unrecognized in this browser.
// If you meant to render a React component, start its name with an uppercase letter.return ( );
};
export default App;
上述代码的问题在于,
greet
组件的名称以小写字母开头。所有的组件名称必须以大写字母开头,因为这是React用来区分我们编写的组件和存在于浏览器中的内置标签的惯例。
// ? capitalize first letter
const Greet = () => {
return Hello world;
};
const App = () => {
return ( );
};
export default App;
【React报错之The tag is unrecognized in this browser】一旦我们将组件名称的第一个字母大写,React就不会认为我们试图使用一个在浏览器中不存在的标签,而是知道我们在使用一个自定义组件。
推荐阅读
- react|react native常用插件
- react.js|React(9)—— Hooks - LazyLoad - Context - 组件优化 - 错误边界 - 组件通信方式总结
- 前端|Next.js 与 React 之间的比较
- react|react-router-dom v6 使用
- React|React 组件三大属性
- React|react-router-dom V6
- React|React组件三大核心属性(二)——props
- react|React 组件与组件实例的三大属性
- react技术栈及全家桶|react-router-dom v6 版本使用内容详解