react组件创建

原创于 2021-11-15 17:53:31 发布 · 639 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #reactjs

react 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在React中创建和使用函数组件与类组件。首先展示了如何定义一个简单的函数组件，然后演示了如何利用Fragment避免额外的DOM元素。接着，通过引入类组件并将其嵌入到函数组件中，展示类组件的使用方式。这个教程涵盖了React基础组件的创建与交互。

一、创建函数组件

function App() {
  return (
    <div>这是函数组件</div>
  )
}
export default App

二、创建类组件

//React是react中默认导出的，Component是创建类组件时需要继承的需要先从react中解构出来
import React,{Component, Fragment} from "react";

class About extends Component{
    render(){
        return (
            <Fragment>这是使用Fragment作为占位符</Fragment> //<>这样写也可以</>
        )
    }
}

export default About

三、类组件的使用,在App组件中引入类组件About

import About from "./About"

function App() {
  return (
    <div>
        <p>这是函数组件</p>
        <About/>
    </div>
  )
}

export default App