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

      

  • 相关阅读:
    简单地通过Python库使用python的socket编程
    js 实现继承的几种方式
    JAVA中获取当前系统时间
    IntelliJ Idea 常用快捷键列表
    关于报错:There is already 'xxxController' bean method的解决方法
    mysql 使用 GROUP BY 时报错 ERROR 1055 (42000)
    安装系统,用cmd进行分区
    Bootstrap关闭当前页
    bootstrap的日期选择器
    Bootstrap如何关闭弹窗
  • 原文地址:https://www.cnblogs.com/js-liqian/p/11787378.html
Copyright © 2011-2022 走看看