React 项目怎么引入自定义组件、传递参数到组件

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. 显示效果如下