react中创建组件

第1种 - 创建组件的方式

> 使用构造函数来创建组件，如果要接收外界传递的数据，需要在构造函数的参数列表中使用`props`来接收；
> 必须要向外return一个合法的JSX创建的虚拟DOM；

创建组件：

JSXfunction Hello () { // return null return <div>Hello 组件</div>
}

为组件传递数据：

// 使用组件并 为组件传递 props 数据
<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>或<Hello {...dog}></Hello>// ...是ES6中的扩展运算符
// 在构造函数中，使用 props 形参，接收外界 传递过来的数据
function Hello(props) {
// props.name = 'zs' 会报错
console.log(props)
// 结论：不论是 Vue 还是 React，组件中的 props 永远都是只读的；不能被重新赋值；
return <div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>
}

1. 父组件向子组件传递数据

2. 使用{...obj}属性扩散传递数据

3. 将组件封装到单独的文件中

4. 注意：组件的名称首字母必须是大写

5. 在导入组件的时候，如何省略组件的`.jsx`后缀名：

js
// 打开 webpack.config.js ，并在导出的配置对象中，新增如下节点：
resolve: {
extensions: ['.js', '.jsx', '.json'], // 表示，这几个文件的后缀名，可以省略不写
alias: {
'@': path.join(__dirname, './src') // 这样，@ 就表示项目根目录中 src 的这一层路径

}

}
}
```

6. 在导入组件的时候，配置和使用`@`路径符号

### 第2种 - 创建组件的方式

> 使用 class 关键字来创建组件
>
> ES6 中 class 关键字，是实现面向对象编程的新形式；

#### 了解ES6中 class 关键字的使用

1. class 中 `constructor` 的基本使用
2. 实例属性和实例方法
3. 静态属性和静态方法
4. 使用 `extends` 关键字实现继承

#### 基于class关键字创建组件

1. 最基本的组件结构：

```jsx
class 组件名称 extends React.Component {
render(){
return <div>这是 class 创建的组件</div>
}
}

转载于:https://www.cnblogs.com/embrace-ly/p/10609830.html

react中创建组件相关推荐

react中创建一个组件_如何使用React和MomentJS创建一个Countdown组件
react中创建一个组件 Recently I had to create a Countdown for one of my other projects, and I thought that i ...
react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
[react] 怎样在react中创建一个事件？
[react] 怎样在react中创建一个事件? var EventEmitter = require('events').EventEmitter; class App extends Compon ...
[react] 在React中声明组件时组件名的第一个字母必须是大写吗？为什么？
[react] 在React中声明组件时组件名的第一个字母必须是大写吗?为什么? 必须,React根据首字母是否大写来区分react组件还是dom元素个人简介我是歌谣,欢迎和大家一起交流前后端知识 ...
React 项目--创建组件（7）
创建组件在上一篇的博客中我们介绍了react中字符串的处理方式和字符串数组的处理方式,如需回顾: https://blog.csdn.net/datouniao1/article/details/1 ...
React中的组件通信——父传子、子传父、Context
0.认识组件间的通信在开发过程中,我们会经常遇到需要组件之间相互进行通信: 比如App可能使用了多个Header,每个地方的Header展示的内容不同,那么我们就需要使用者传递给Header一些数据 ...
react中函数式组件React Hooks
React Hooks 函数式组件使用hooks理由高阶组件为了复用,导致代码层级复杂生命周期的复杂写成functional组件,无状态组件,因为需要状态,又改成了class,成本高在16. ...
React（04）：React中的组件化及父子组件间的传值取值
前言接着前一篇继续学习React组件化 React(03):React中的JSX语法正文什么是组件化: 是从 UI 界面视图的角度来进行分析的:把一些可复用的UI元素,抽离为单独的组件:便于项 ...
React中受控组件和非受控组件 1
一,受控组件 1.概念: 受控组件就是可以被 react 状态控制的组件在 react 中,Input textarea 等组件默认是非受控组件(输入框内部的值是用户控制,和 React 无关).但 ...
React中受控组件和非受控组件
受控组件在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...

react中创建组件

react中创建组件相关推荐

最新文章

热门文章