好客租房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能够使用受控组件处理表单
随机推荐
- 自动驾驶运动规划-Dubins曲线
1.Simple Car模型 如下图所示,Simple Car模型是一个表达车辆运动的简易模型.Simple Car模型将车辆看做平面上的刚体运动,刚体的原点位于车辆后轮的中心:x轴沿着车辆主轴方向, ...
- 《剑指offer》面试题2:实现Singleton 模式
面试题2:实现Singleton 模式 题目:设计一个类,我们只能生成该类的一个实例. 只能生成一个实例的类是实现了Singleton (单例)模式的类型.由于设计模式在面向对象程序设计中起着举足 ...
- 【小程序开发】文本text-overflow属性的使用
text-overflow原本是CSS3的一个属性,在微信小程序中也支持. text-overflow文本溢出显示省略号~ 注:使用text-overflow时,需要设置固定的宽度才起作用,所以该元素 ...
- 子线程中如何修改ui界面
1.Android进程 一个应用程序被启动时,系统默认创建执行一个叫做"main"的线程.这个线程也是你的应用与界面工具包(android.widget和android.view包 ...
- swig模板引擎和ejs模板引擎
swig模板引擎的基本用法: 1. 变量 {{ name }} //name名前后必须要加空格,不加就会报错 2. 属性 {{ student.name }} 3. 模板继承 swig使用exten ...
- 爬虫---scrapy架构和原理
scrapy是一个为了爬取网站数据, 提取结构性数据而编写的应用框架, 它是基于Twisted框架开发而来, 而Twisted框架是事件驱动的, 比较适合异步代码. 对会阻塞线程的操作, 包括访问数据 ...
- MySQL高级以及锁机制
MySQL高级 推荐阅读: 锁:https://www.cnblogs.com/zwtblog/tag/锁/ 数据库:https://www.cnblogs.com/zwtblog/tag/数据库/ ...
- NodeJS学习day1
今天主要学习的IO操作 const fs = require('fs') fs.readFile('./files/11.txt','utf-8',function(err,daraStr){ //读 ...
- 《手把手教你》系列基础篇(八十六)-java+ selenium自动化测试-框架设计基础-Log4j实现日志输出(详解教程)
1.简介 自动化测试中如何输出日志文件.任何软件,都会涉及到日志输出.所以,在测试人员报bug,特别是崩溃的bug,一般都要提供软件产品的日志文件.开发通过看日志文件,知道这个崩溃产生的原因,至少知道 ...
- mysql学习基础2
1.什么是SQL? Structured Query Language:结构化查询语言 其实就是定义了操作所有关系型数据库的规则.每一种数据库操作的方式存在不一样的地方,称为"方言" ...