Question

我是一个新手，有一个奇怪的问题。我已经定义了一个无状态函数，当我想尝试将其导入我的主要组件时，它没有加载该函数。我猜有一个我不知道的命名约定。 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;

以下内容不起作用

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;

VS代码皮棉说

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;

VS代码棉绒不再显示该错误，并且该应用程序仍按预期运行。如您所见，我仅将appHeader组件的名称更改为KKK。有人可以指出我在做什么错，并可能提供与此相关的任何文档。

Answer 1

您需要将appHeader大写为AppHeader，以使React理解这是一个自定义组件，而不是内置的html组件。假定以小写字母开头的组件内置在HTML元素中。

查看以下答案：ReactJS component names must begin with capital letters?

然后来自React文档：

用户定义的组件必须大写

当元素类型以小写字母开头时，它指的是诸如或的内置组件，并导致将字符串'div'或'span'传递给React.createElement。以大写字母开头的类型（例如，编译为React.createElement（Foo））并与您的JavaScript文件中定义或导入的组件相对应。

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

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

1 个答案: