zoukankan      html  css  js  c++  java
  • 使用class关键字创建类组件、props参数

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

      

  • 相关阅读:
    Uri编码,包括javascript前端与C#服务器端
    HttpWebResponse类
    HTTP报文
    HTTP权威指南阅读记录
    XMPP通讯开发-1
    开源安卓播放器:Dolphin Player 简单分析
    Spring MVC框架
    Median of Two Sorted Arrays (找两个序列的中位数,O(log (m+n))限制) 【面试算法leetcode】
    C语言指针5分钟教程
    2013中国互联网安全大会---关于季昕华老师的分享(不喜请勿入!)
  • 原文地址:https://www.cnblogs.com/js-liqian/p/11787378.html
Copyright © 2011-2022 走看看