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. React-简单通用的抛物线动画

    一个简单通用的 React 抛物线动画demo Usage import { parabola } from "./parabola" ... onAnimate = () =&g ...

  2. React 可视化开发工具 Shadow Widget 非正经入门(之六:markdown)

    本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点.本篇讲解 Markdown 在 Shadow Widget 中的应用. Markdown 在 Shadow Widget 中 ...

  3. 主线程中的Looper.loop()为什么不会造成ANR

    引子: 正如我们所知,在android中如果主线程中进行耗时操作会引发ANR(Application Not Responding)异常. 造成ANR的原因一般有两种: 当前的事件没有机会得到处理(即 ...

  4. uniapp清理缓存

    <template> <view class="content"> <view>应用缓存:{{storageSize}}</view> ...

  5. python修改Gsettings的配置文件

    GSettings 的配置文件是 xml 格式的,文件需以 .gschema.xml 结尾,文件名通常与 id 相同.配置文件安装在 /usr/share/glib-2.0/schemas/ 目录下, ...

  6. 网卡激活-up(dhcp方式获得ip)

    一次修复记录 采样: [root@fp-web-124 network-scripts]# cat /etc/redhat-release CentOS Linux release 7.2.1511 ...

  7. 自家APP打开微信小程序,可行吗?

    小程序的通用解决方案,今天为大家介绍一下FinClip.它的最大特点,就是能够让任何 App 运行小程序. 只需要在你的 App 里面,引入它的 SDK,就能加载运行外部小程序了.除了 SDK,它还提 ...

  8. JavaWeb学习day3-Maven&安装

    1.官网下载:https://maven.apache.org/ 2.解压下载好的压缩包 3.配置环境变量 添加如下图变量 在path变量下添加下图 4.安装完成检测 cmd输入:mvn -versi ...

  9. 【课程汇总】OpenHarmony 成长计划知识赋能第三期系列课程(附链接)

    OpenHarmony 开源开发者成长计划第三期知识赋能课程硬核程度再次升级,带领开发者上手 OpenHarmony 的标准系统应用开发,学习标准设备应用开发,使用 eTS UI 开发分布式应用样例, ...

  10. 渗透测试中为什么https抓包是明文传输?

    网站用的是https抓包是明文传输,为什么能看到https报文的明文? https其实就是 http + SSL/TLS 两种协议的合体.http协议是应用层协议,而SSL/TLS是传输层协议. 那问 ...