2021-8-14 react笔记-2 创建组件 基本用法

本文主要是介绍2021-8-14 react笔记-2 创建组件 基本用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、目录解析

public中的index.html为入口文件

src目录中文件很乱，先整理文件夹。

新建components 放组件

新建assets放资源   ->/images      ->/css

把乱的文件放进去  修改App.js 根组件和index.js入口文件中的引入路径

2、新建组件

在components文件夹中新建[Name].js文件 //组件名首字母大写

随后在组建中引入react,component

import React,{Component} from 'react';

定义类组件

class Home extends Component{constructor([props]){super([props])  //props用于父子组件传值 无需传值则不用写}render(){return <div>hello world</div>}
}

另一种引入方法

import React from 'react';
class Home extends React.Component{constructor([props]){super([props])  //props用于父子组件传值 无需传值则不用写}render(){return <div>hello world</div>}
}

构造函数  construct如果直接写会报错 因为组件是继承了component组件 因此要使用super()继承

super指父组件中的this  必须写在其他this之前

导出到根组件App 并在根组件中引入

export default Home; //导出类组件

import  Home from `./components/Home`  //引入组件
function App() {return (<div className="App"><Home/>        //插入组件  注意首字母大写</div>);
}

这篇关于2021-8-14 react笔记-2 创建组件 基本用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---