首页 > 其他 > 详细

使用class关键字创建类组件、props参数

时间:2019-11-03 15:38:15      阅读:87      评论:0      收藏:0      [点我收藏+]
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>
  }
}
  
// react元素
// 这里的Movie标签其实就是Movie类的一个实例对象
const ele = <div>qq<Movie></Movie></div>
// 挂载点
let box = document.querySelector(‘#app‘)
// console.log(box)
// 挂载
render(ele,box)

  

接受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>
  }
}

  

使用class关键字创建类组件、props参数

原文:https://www.cnblogs.com/js-liqian/p/11787378.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!