码迷,mamicode.com
首页 > 其他好文 > 详细

react的组件的两种形式

时间:2020-03-26 15:10:44      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:rop   参数   方式   区别   创建   直接   ken   两种   react   

1.如果需要传参,在函数中加一个props参数来接受,并且必须向外return一个合法的jsx创建的虚拟DOM。

//1. 组件名首字母为大写 2. 必须return 合法的jsx
// 这里就可以相当于子组件
function Hellow (props){
//props为父组件传过来的数据
//如果打印props的话,只要子组件用的到东西都会打印出来,在这里没有用到父组件中的a数据,因此只会打印出前三个来。
return <div>
姓名: {props.name}, 性别: {props.sex}, 年龄: {props.age}
</div>
}
// 这里就想当于父组件
const person = {
name: ‘zs‘,
sex: ‘gener‘,
age: 12,
a: 2
}
//将组件渲染到页面上来
// 有两个参数分别为,1.填写组件,2. 将组件渲染到指定的位置,也就是指定的DOM元素上。
ReactDOM.render(<div>
//1. 使用ES6的展开运算符
<Hellow {...person}/>
//2. 直接赋值
<Hellow name=‘zs‘ sex=‘gener‘ age={12}/>
//3. 使用`.`的形式,父组件
<Hellow name={person.name} sex={person.sex} age={person.age}/>
</div>document.getElementById(‘app‘))

2. 使用class关键字来创建组件

这种方法也是最常用的一种方式          

  

最基本的创建组件结构

 

class World extends React.Component{ render(){ return<div>这是一个组件</div> } }

 

例如:

// 父组件
// 创建组件和虚拟DOM
import React from ‘react‘
//实现虚拟DOM操作并且渲染到页面指定的容器中
import ReactDOM from ‘react-dom‘
//1. 创建参数,给子组件使用
const person = {
name: ‘zs‘,
sex: ‘gener‘,
age: 23
}
//2. 导入子组件
import World from ‘./Component/World‘
//3. 渲染到页面上
ReactDOM.render(
<div><World {...person}/></div>, document.getElementById(‘app‘)
)

//子组件
export default class World extends ReactDOM.Component{
constructor(props){
// 父类构造函数的引用
super(props)
// this.state是当前class组件私有数据
this.state= {
msg: ‘zs‘,
info: ‘hellow‘
}
}
//render是一个生命周期中的函数
render(){
return <div>
{this.state.msg},
{this.props.name}
</div>
}
}

  1. 构造函数创建的组件没有状态
  2. class创建的组件有状态
  3. 两种组件的本质的区别为state属性

 

react的组件的两种形式

标签:rop   参数   方式   区别   创建   直接   ken   两种   react   

原文地址:https://www.cnblogs.com/zhouyideboke/p/12574553.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!