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的基本使用的更多相关文章

  1. JavaEE在职加薪课好客租房项目实战视频教程

    JavaEE在职加薪课好客租房项目实战视频教程课程介绍:       本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...

  2. 好客租房53-context的使用

    app组件要传递给child组件 该如何处理 更好的姿势 跨组件传递数据 Provider 用来提供数据 Consumer用来消费数据 1调用React.createContext() 创建provi ...

  3. 好客租房43-react组件基础综合案例-4获取评论信息

    获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...

  4. 好客租房44-react组件基础综合案例-5发表评论-1

    发表评论 1给按钮绑定点击事件 2在事件处理程序中 通过state获取评论信息 3将评论信息添加到state中 并调用setState()方法更新数据 //导入react import React f ...

  5. 好客租房45-react组件基础综合案例-6边界问题

    边界问题 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 ...

  6. 好客租房32-事件绑定this指向(class实例方法)

    class实例方法 利用箭头函数的class实例方法 //导入react import React from 'react'   import ReactDOM from 'react-dom' // ...

  7. 好客租房33-事件绑定this指向(总结)

    1推荐使用class的实例方法 //导入react import React from 'react'   import ReactDOM from 'react-dom' //导入组件   // 约 ...

  8. 好客租房41-react组件基础综合案例-渲染列表数据

    1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...

  9. 好客租房42-react组件基础综合案例-渲染列表无数据并优化

    渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...

  10. 好客租房19-react组件基础目标

    1能够使用函数创建组件 2能够使用class创建组件 3能够给react元素绑定事件 4能够使用state和setstate 5能够处理事件中的this指向问题 6能够使用受控组件处理表单

随机推荐

  1. CSS: 给表格的第一列和最后一列不同的样式

    table td:first-child { width:160px; height:20px; border:solid 1px Black; padding:5px; text-align:cen ...

  2. IMWebConf 2017 官网彩蛋解谜

    前言 IMWebConf 2017 ←这是官网 然后看到了这个: 所以就试了下,作为一个前端菜鸟,发现通关还挺简单的,不过每个方面的知识都涉及到一点,所以在这里总结一下. 下面进入正题. 第 0 关 ...

  3. 详解 CSS 属性 - position

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: absolute position: relative position: fixed ...

  4. python爬虫---表情包批量采集

    代码: import requests from pyquery import PyQuery as pq # 比xpath还要灵活的html解析工具 # 定义请求 headers = { " ...

  5. Android打开数据库读取数据

    打开数据库读取数据 private MyDatabaseHelper dbHelper; dbHelper=new MyDatabaseHelper(this,"List.db", ...

  6. 利用window对象自带atob和btoa方法进行base64的编码和解码

    项目中一般需要将表单中的数据进行编码之后再进行传输到服务器,这个时候就需要base64编码 现在可以使用window自带的方法window.atob() 和  window.btoa()  方法进行 ...

  7. string 函数

    传送门:https://www.w3school.com.cn/php/php_ref_array.asp addcslashes() 返回在指定的字符前添加反斜杠的字符串. addslashes() ...

  8. 初识gradle, idea+springboot Demo

    写在前面; 使用maven管理写过几个springboot的系统, 此篇博客纯属记录整理学习的过程. 另外, 源码分享地址在最后. Java: 1.8.0_281 tomcat: 1.8 IDE: I ...

  9. 关于Swagger优化

    背景 尽管.net6已经发布很久了,但是公司的项目由于种种原因依旧基于.net Framework.伴随着版本迭代,后端的api接口不断增多,每次在联调的时候,前端开发叫苦不迭:"小胖,你们 ...

  10. python基础练习题(题目 统计 1 到 100 之和)

    day31 --------------------------------------------------------------- 实例045:求和 题目 统计 1 到 100 之和. 分析: ...