好客租房27-state的基本使用
5.1state的基本使用
状态:数据 是组件内部的私有数据 只能再组件内部使用
state的值是对象 表示一个组件中可以有多个数据
获取数据
this.state
//导入react
import React from 'react'
import ReactDOM from 'react-dom'
//导入组件
import Hello from './Hello'
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
class HelloWorld extends React.Component {
constructor(){
super()
//初始化state
this.state={
geyao:0
}
}
render() {
return (
<div>
<h1>{this.state.geyao}</h1>
</div>
)
}
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'))
好客租房27-state的基本使用的更多相关文章
- JavaEE在职加薪课好客租房项目实战视频教程
JavaEE在职加薪课好客租房项目实战视频教程课程介绍: 本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...
- 好客租房53-context的使用
app组件要传递给child组件 该如何处理 更好的姿势 跨组件传递数据 Provider 用来提供数据 Consumer用来消费数据 1调用React.createContext() 创建provi ...
- 好客租房43-react组件基础综合案例-4获取评论信息
获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...
- 好客租房44-react组件基础综合案例-5发表评论-1
发表评论 1给按钮绑定点击事件 2在事件处理程序中 通过state获取评论信息 3将评论信息添加到state中 并调用setState()方法更新数据 //导入react import React f ...
- 好客租房45-react组件基础综合案例-6边界问题
边界问题 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 ...
- 好客租房32-事件绑定this指向(class实例方法)
class实例方法 利用箭头函数的class实例方法 //导入react import React from 'react' import ReactDOM from 'react-dom' // ...
- 好客租房33-事件绑定this指向(总结)
1推荐使用class的实例方法 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约 ...
- 好客租房41-react组件基础综合案例-渲染列表数据
1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...
- 好客租房42-react组件基础综合案例-渲染列表无数据并优化
渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...
- 好客租房19-react组件基础目标
1能够使用函数创建组件 2能够使用class创建组件 3能够给react元素绑定事件 4能够使用state和setstate 5能够处理事件中的this指向问题 6能够使用受控组件处理表单
随机推荐
- CSS中宽度与高度
div的高度 div由的高度是由它里面的字体乘以字体建议的行高确定,跟这个字体大小没有关系(不同字体相同字体大小,会影响div的高度.)如过明确告诉浏览器行高,div高度就是行高. 文字两端对齐: 文 ...
- 针对于iosAPP内嵌H5,-webit-overflow-scrolling:touch;产生空白情况
问题描述:一个内嵌IOSAPP的H5页面,长页面,大概1.6个屏幕高度,由于有列表滑动起来很不流畅,所以用了-webit-overflow-scrolling:touch;这个只针对ios端的物理滚动 ...
- 简单的多选框选择功能js代码
最近没事写了个特别基础的多选框功能代码,代码如下:js部分: //获取所有class为checkbox的多选按钮(需要以下功能需要先写出对应功能的元素). var checkBoxList = doc ...
- 一个命令完成[打包+同步七牛cdn+上传服务器]
webpack+gulp+qshell+npm-scripts实现一个命令完成[打包+同步cdn+上传服务器] 说明 由于我们用的七牛云存储,所以cdn也是走的七牛,所以并不适用于其他的cdn,但是思 ...
- SpringMVC 配置和请求方式
SpringMVC 总结内容 一.什么是 Spring MVC ? Spring MVC 是 Spring 对 MVC 思想的实现(三层架构) 优点: 二.前端控制器 Spring MVC 中的前端控 ...
- Python IDLE清屏
在学习和使用Python的过程中,少不了要与Python IDLE打交道.但使用 Python IDLE 都会遇到一个常见而又懊恼的问题--要怎么清屏? 答案是为IDLE增加一个清屏的扩展ClearW ...
- 手撕spring核心源码,彻底搞懂spring流程
引子 十几年前,刚工作不久的程序员还能过着很轻松的日子.记得那时候公司里有些开发和测试的女孩子,经常有问题解决不了的,不管什么领域的问题找到我,我都能帮她们解决.但是那时候我没有主动学习技术的意识,只 ...
- Twitter上怎么保存视频的教程来啦
玩了多年的推特, 我发现竟然有这么便捷的方法把推特上的视频给保存下来 如果你也需要的话那么我来告诉你怎么操作吧~ Twitter(通称推特)是一家美国社交网络及微博客服务的网站 是全球互联网上访问量最 ...
- LevelDB 学习笔记1:布隆过滤器
LevelDB 学习笔记1:布隆过滤器 底层是位数组,初始都是 0 插入时,用 k 个哈希函数对插入的数字做哈希,并用位数组长度取余,将对应位置 1 查找时,做同样的哈希操作,查看这些位的值 如果所有 ...
- 注册中心Eureka的简单使用
不讲原理,只讲简单使用 微服务,一般是父子工程,可以直接在父工程下新建个模块来用来启动Eureka 1.创建Eureka模块 2.引入依赖 <dependency> <groupId ...