【报错】is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

前言

分析

这个报错信息是由于在 React 项目中组件的命名不符合规范导致的。React 组件应该遵循以下命名约定：

• PascalCase：自定义的 React 组件（即首字母和每个单词的首字母都大写），例如：MyComponent。
• 小写：原生的 HTML 元素标签应该使用小写字母，例如：div、span。

可能的原因：

1. React 组件名称没有使用 PascalCase：

   • 组件名称首字母可能小写了，比如 myComponent 而不是 MyComponent。

2. HTML 标签名称首字母大写：

   • 可能误用了大写字母作为 HTML 元素名称，比如将 <div> 写成 <Div>。

解决方法：

1. 确保自定义 React 组件的命名使用 PascalCase： 如果你创建了一个组件，应该像下面这样使用 PascalCase 命名：

   // 正确的组件命名
   function MyComponent() {
     return <div>Hello</div>;
   }
   
   export default MyComponent;
   

   如果你在 JSX 中使用这个组件，也需要遵循 PascalCase：

   import MyComponent from './MyComponent';
   
   function App() {
     return <MyComponent />;
   }
   

2. 确保 HTML 元素使用小写字母： 对于标准的 HTML 标签，使用小写字母，例如：

   // 正确使用 HTML 标签
   return <div>Hello World</div>;
   

总结：

报错是由于组件名称或 HTML 标签的大小写不规范导致的。自定义 React 组件需要使用 PascalCase，HTML 标签需要使用小写字母。