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