响应导入但不显示的Js组件

Question

我有两个组件‘脚注’和‘页眉’在组件目录中。它进口正常，但我不能显示它。

App.js

import header from "./components/header";
import footer from "./components/footer";

function App() {
 
  return (

    <>
      <header />
      <main>
          <h1>Welcome to Proshop</h1>
      </main>
      <footer />
    </>
  )
}

export default App;

header.js

import React from 'react'

function header() {
  return (
    <div>header</div>
  )
}

export default header

footer.js

import React from 'react'

function footer() {
  return (
    <div>footer</div>
  )
}

export default footer

输出就是这样

​

​

Answer 1

组件必须以大写字母开头，否则将被视为常规html标记，看这上面的文档。

当元素类型以小写字母开头时，它引用了内置组件(如<div>或<span> )，并导致字符串'div‘或'span’传递给React.createElement。以大写字母开头的类型，如将<Foo />编译为React.createElement(Foo)，并对应于在JavaScript文件中定义或导入的组件。

奖金点：

不管您的组件文件名是从小写还是大写字母开始的，您都应该用大写字母导入它。

假设我们有一个文件名header.js和一个带有名称头的函数。

如果你这样进口它会有帮助的。

import Header from './header'

Answer 2

您应该将组件的名称大写起来。例如：<Header />。

Answer 3

您应该将组件的名称大写起来。例如，页眉将为：<Header />，而页脚将为<Footer />