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

React 项目怎么引入自定义组件、传递参数到组件 2022-08-27 1048

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;