import React,{Component} from ‘react‘
import {render} from ‘react-dom‘
// 使用class创建组件
class Movie extends Component {
// return函数的作用是渲染当前组件所对应的虚拟DOM结构
render () {
return <div>1234</div>
}
}
--------------------------------------------------------------------------
import React from ‘react‘
import {render} from ‘react-dom‘
// 使用class创建组件,通过React.Component来继承父类
class Movie extends React.Component {
render () {
return <div>1234</div>
}
}
接受props参数
不论是class还是普通function创建的组件,它们的props都是只读的;
// 使用class创建组件
class Movie extends React.Component {
render () {
// 在class关键字创建的组件中,如果想要使用外界传递的props参数,不需要接收,直接通过this.props.***访问即可
return <div>{this.props.name}-----{this.props.age}</div>
}
}
const user = {
name: ‘李李‘,
age: ‘11‘
}
// react元素
// 这里的Movie标签其实就是Movie类的一个实例对象
const ele = <div>qq<Movie {...user}></Movie></div>
子类的私有数据
// 使用class创建组件
class Movie extends React.Component {
constructor () {
super()
// this.data 就相当于vue中的data(){return{}} 是可读可写的
this.data = {
number: 22
}
}
render () {
return <div>{this.data.number}</div>
}
}
原文:https://www.cnblogs.com/js-liqian/p/11787378.html