[英]React Js Components imported but not displaying
I have two components 'footer' and 'header' in the components directory.我在组件目录中有两个组件“页脚”和“页眉”。 It imports properly but I am not able to display it.它可以正确导入,但我无法显示它。
App.js应用程序.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 header.js
import React from 'react'
function header() {
return (
<div>header</div>
)
}
export default header
footer.js页脚.js
import React from 'react'
function footer() {
return (
<div>footer</div>
)
}
export default footer
The output is just this output就是这个
Your components must start with a capital letter, if not they will be treated like a regular html tags, see the docs on this您的组件必须以大写字母开头,否则它们将被视为常规 html 标签, 请参阅此文档
When an element type starts with a lowercase letter, it refers to a built-in component like
<div>
or<span>
and results in a string 'div' or 'span' passed to React.createElement.当元素类型以小写字母开头时,它指的是一个内置组件,如<div>
或<span>
并导致传递给 React.createElement 的字符串 'div' 或 'span'。 Types that start with a capital letter like<Foo />
compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.以大写字母开头的类型,如<Foo />
编译为 React.createElement(Foo) 并对应于在 JavaScript 文件中定义或导入的组件。
Bonus Point:奖励积分:
whatever your components file name is starting from the lower or uppercase letter you should always import it with an upper case.无论您的组件文件名是从小写字母还是大写字母开始的,您都应该始终以大写字母导入它。
let's say we have a file name header.js and a function with the name header.假设我们有一个文件名为 header.js 和一个名为 header 的 function。
it would help if you imported it like this如果你像这样导入它会有所帮助
import Header from './header'
You should capitalize your component's name.您应该将组件的名称大写。 For example: <Header />
.例如: <Header />
。
You should Capitalize your component's name.您应该将组件名称大写。 for example header will be: <Header />
and footer will be <Footer />
例如 header 将是: <Header />
而页脚将是<Footer />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.