使用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>
}
}
接受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参数的更多相关文章
- 使用 function 构造函数创建组件和使用 class 关键字创建组件
使用 function 构造函数创建组件: 如果想要把组件放到页面中,可以把构造函数的名称,当作 组件的名称,以 HTML标签形式引入页面中, 因为在React中,构造函数就是一个最基本的组件. 注意 ...
- C++反射机制:可变参数模板实现C++反射(使用C++11的新特性--可变模版参数,只根据类的名字(字符串)创建类的实例。在Nebula高性能网络框架中大量应用)
1. 概要 本文描述一个通过C++可变参数模板实现C++反射机制的方法.该方法非常实用,在Nebula高性能网络框架中大量应用,实现了非常强大的动态加载动态创建功能.Nebula框架在码云的仓库地 ...
- 好客租房22-react组件的两种创建方式(类组件)
2.2使用类创建组件 类组件:使用ES6的class创建的组件 约定1:类组件必须以大写字母开头 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 约定3:组件必 ...
- JavaScript中创建类,赋值给ajax中的data参数
缘由:因为要给根据是否选中checkbox来动态增加ajax中data的属性(ajax的data属性格式的几种方法,参考http://www.jb51.net/article/46676.htm) d ...
- react 也就这么回事 05 —— 组件 & Props
什么是组件:用来实现局部功能的可复用代码片段 比如很多界面会用到"分页"功能,因此可以将它封装成独立的组件 这样用到分页的界面只需引入该组件而不必重新写代码 1 定义组件 在 Re ...
- 组件&Props
组件允许你将Ui拆分为独立可复用的代码片段,并对每个片段进行独立构思.本指南只在介绍组件的相关概念.你可以参考详细组件 API. 组件,从概念上类似与JavaScript函数.它接受任意的入参(既“p ...
- React函数类组件及其Hooks学习
目录 函数类组件 函数式组件和类式组件的区别: 为什么要使用函数式组件? Hooks概念及常用的Hooks 1. useState: State的Hook 语法 useState()说明: setXx ...
- Creating Classes 创建类
The dojo/_base/declare module is the foundation of class creation within the Dojo Toolkit. declare a ...
- JS创建类和对象
JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...
随机推荐
- 06 python学习笔记-常用模块(六)
一. 模块.包 1.什么是模块? Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句,是用来组织代码的.模块能定义函数 ...
- 面试又被 Java 基础难住了?推荐你看看这篇文章。
本文已经收录自 JavaGuide (59k+ Star):[Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识. 1. 面向对象和面向过程的区别 面向过程 :面向过程性能比面 ...
- String s=new String("123") 创建了两个对象,及证明
这个问题百度上有很多答案 有一次面试的时候,面试官也提到了这个问题.我回答了两个对象,并且解释了一个对象是 "123" 存在了字符串常量池,另一个是 s 所引用的堆中的对象. 但是 ...
- Java基础(二十六)Java IO(3)字节流(Byte Stream)
字节流是以字节为单位来处理数据的,由于字节流不会对数据进行任何转换,因此用来处理二进制的数据. 一.InputStream类与OutputStream类 1.InputStream类是所有字节输入流的 ...
- index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- spring整合mybatisplus2.x详解
一丶Mp的配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...
- 痞子衡嵌入式:飞思卡尔i.MX RTyyyy系列MCU硬件那些事(2.2)- 在串行NOR Flash XIP调试原理
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列EVK在串行NOR Flash调试的原理. 本文是i.MXRT硬件那些事系列第二篇的续集,在第二篇首集 ...
- Netty学习篇④-心跳机制及断线重连
心跳检测 前言 客户端和服务端的连接属于socket连接,也属于长连接,往往会存在客户端在连接了服务端之后就没有任何操作了,但还是占用了一个连接:当越来越多类似的客户端出现就会浪费很多连接,netty ...
- 使用 Github + Hexo 从 0 搭建一个博客
最近有几位同学在公众号后台留言问我的博客站是怎么建站的,思来想去,还是写一篇从 0 开始吧. 前置准备 我们先聊一下前置准备,可能很多同学一听说要自己搭一个博客系统,直接就望而却步.不得有台服务器么, ...
- 赤壁情:dp
首先这道题用到的3个新关键字大概讲一下: (我刚学会仅仅会瞎搞做题,欢迎大神补充) static:声明一个变量并清空.(不知道用不用时间,求解答) 具体用法:static 变量类型 变量名.如:sta ...