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. Easyx库安装教程

    目录: 安装 使用 帮助文档 安装 打开Easyx官网https://easyx.cn/ 点击图中下载按钮,下载Easyx库.或者直接点此下载 双击运行 图中标注的绿色框内为官方提供的帮助文档,红色框 ...

  2. Altium Designer 开始一个项目

    通常一个嵌入式开发都需要一个开发板,这就涉及到原理图设计和PCB设计等流程.目前比较主流的设计软件当属Altium Designer了,于是便向写一个关于这方面的专题,也好总结一下,省得以后忘记. A ...

  3. 惠普电脑win10系统中WLAN不见了

    原文链接:笔记本电脑win10系统中WLAN不见了 怎么解决? - 知乎 (zhihu.com)

  4. 【c++】容器的基本操作

    操作\容器 vector list string set stack queue map 插入 push_bcak().insert() push_back() .push_front().inser ...

  5. CTF大赛模拟-CFS三层内网漫游

    CTF大赛模拟-CFS三层内网漫游 环境: 三台虚拟机,三个网络. target 1:192.168.161.178 ,192.168.52.132 (linux) target 2:192.168. ...

  6. Python入门-第一行代码到多行代码

    不管学啥语言,开始的第一行代码都是: print("hello word") 回车之后,就代表你正式进入代码的世界! 如果报错,恭喜你获得第一个书写bug,请检查单词拼写,双引号, ...

  7. C++---条件结构和循环结构

    条件结构 if结构 #include <iostream> using namespace std; int main() { //判断用户输入的字符是否是合法的硬盘盘符A-Z char ...

  8. int bool str

    一. python的基本数据类型 1. int 整数 2. bool 布尔.  判断.  if  while 3. str  字符串 ,一般存放小量的数据 4. list  列表. 可以存放大量的数据 ...

  9. Spring Boot-@ImportResource注解

    @ImportResource:导入Spring的配置文件,让配置文件里面的内容生效 第一步:创建一个spring配置文件bean.xml <?xml version="1.0&quo ...

  10. Hash-题解-方法

    有效的字母异位词 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词. 示例 1: 输入: s = "anagram", t = "nagar ...