Reactjs 导入无状态函数时出现问题

我是一个新的反应和有一个奇怪的问题。我已经定义了一个无状态函数，当我想在我的主组件中导入它时，它不会加载该函数。我猜有一个我不知道的命名惯例。npm start没有给出任何错误，所以我假设代码编译正常

下面是我的无状态组件

import React from 'react';

const AppHeader = () => {
    return(

            <div class="jumbotron text-center">
            <h1>Map Search</h1>
            <p>Searching map for nearest matches from account</p> 
            </div>

    );
}

export default AppHeader;

从“React”导入React；
常量AppHeader=（）=>{
返回(
地图搜索
从帐户搜索最近匹配的地图

);
}
导出默认AppHeader；

下面的代码不起作用

import React from 'react';
import './App.css';
import appHeader from './UI/appHeader';

class App extends React.Component {
  render(){

    return (      
      <div className="App">
        <appHeader/>
      </div>
    );
  }


}

export default App;

从“React”导入React；
导入“/App.css”；
从“./UI/appHeader”导入appHeader；
类应用程序扩展了React.Component{
render（）{
报税表（
);
}
}
导出默认应用程序；

代码林特说

appHeader已声明，但从未使用其值

但是下面的方法确实有效

import React from 'react';
import './App.css';
import KKK from './UI/appHeader';

class App extends React.Component {
  render(){

    return (      
      <div className="App">
        <KKK/>
      </div>
    );
  }


}

export default App;

从“React”导入React；
导入“/App.css”；
从“/UI/appHeader”导入KKK；
类应用程序扩展了React.Component{
render（）{
报税表（
);
}
}
导出默认应用程序；

---

VS code lint不再显示错误，应用程序也按预期工作。如您所见，我只将appHeader组件的名称更改为KKK。是否有人能指出我做错了什么，并提供相关文档。

您需要将

appHeader

大写为

appHeader

，以便React理解这是一个自定义组件，而不是内置html组件。以小写字母开头的组件被假定为内置于HTML元素中

看看这个答案：

从React文档中：

用户定义的组件必须大写

当一个元素类型以小写字母开头时，它引用一个内置组件，如or，并导致传递给React.createElement的字符串'div'或'span'。以大写字母开头的类型，如compile to React.createElement（Foo），并与JavaScript文件中定义或导入的组件相对应

我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在JSX中使用它之前将其分配给大写变量

---

您可能需要大写

appHeader

才能成为

appHeader