1. 首先需要在使用组件的页面引入自定义组件
src/index.js 是一个入口文件,我们也可以在这里引用
import React,{ Suspense, Component } from 'react'; //引入自定义组件
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
注意,什么是 Suspense 在动态导入的帮助下,React Suspense让我们轻松定义延迟加载的组件,Suspense来包裹懒加载的组件进行加载,可以设置fallback现实加载中效果。什么是 React Component 让我们可以使用自定义组件
2. Create a new component
注意,原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。
a.新建存放组件的目录 src/components
b.在组件目录下新建名称为 Header 组件目录,在Header下新建 header.js
import React,{ Suspense, Component } from 'react'; // 这里引入组件是为了在这里使用其它组件
function Header(param) {
return <h1>Hello {param.name}!</h1>;
}
export default Header;
3. 在App.js 里面使用组件
import logo from './logo.svg';
import './App.css';
import Header from './components/Header/header' //这里自定义组件的 Path
import React from "react";
function App() {
let arr = [
<h2>学的不仅是技术,更是梦想!</h2>,
];
const myElement =
<div className="App">
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
{/*这里是使用组件 name 是传的参数到组件里*/}
<Header name="React 自定义组件 Head "></Header>
</div>
</div>;
return myElement;
}
export default App;
注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
4. 显示效果如下