为什么它不显示(反应小应用程序)

Question

我不明白为什么文本没有显示？头类应该导出呈现函数，该函数中应该有头。

App.js:

import logo from './logo.svg';
import './App.css';
import header from './Components/header';

function App() {
return (
<header />
);
}
export default App;

header.js:

import React, { Component } from 'react';
export class header extends Component {
render() {
return ( 
<div> <h1> dfdfd </h1></div>
);
}
}
export default header;

Answer 1

尝试将Uppercase用于函数'header'

import Header from "./Components/header";
function App() {
return <Header />;
}
export default App;

注意：文件名小写也可以。

编辑：

更多细节示例：

App.js

import { header as Header } from "./Components/header";
function App() {
return <Header />;
}
export default App;

header.js

import React, { Component } from "react";
class header extends Component {
render() {
return (
<div>
{" "}
<h1> dfdfd </h1>
</div>
);
}
}
// export default header; // No Problem if you 'import Header from "/path/to/file"'
export { header }; // Must be 'import {header: Header} from "/path/to/file"'

但我建议您的组件类/函数名始终以大写字母开头。

Answer 2

标题组件的名称应以大写开头

class Header extends Component {
render() {
return ( 
<div> <h1> dfdfd </h1></div>
);
}
}
export default Header;

Answer 3

将类名设为大写Header并使用export default Header导出

App.js

import logo from './logo.svg';
import './App.css';
import Header from './Components/header';

function App() {
return (
<Header />
);
}
export default App;

Header.js

import React, { Component } from 'react';
export default class Header extends Component {
render() {
return ( 
<div> <h1> dfdfd </h1></div>
);
}
}

Answer 4

我把你的代码修改成这样：

修改的App.js

import logo from './logo.svg';
import './App.css';
import Header from './Components/Header';

function App() {
return (
<Header />
);
}
export default App;

修改的Header.js

import React, { Component } from 'react';
export class Header extends Component {
render() {
return ( 
<div>
<h1>
dfdfd
</h1>
</div>
);
}
}
export default Header;

注意我是如何用大写的H将您的header.js更改为Header.js的。React不喜欢用小写字母开头命名组件。只需将您的header.js重命名为Header.js，它就可以开始工作了。

干杯，

Arjis Chakraborty。