热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

react属性与状态学习笔记

知识点:1、react属性的调用this.props.被调用的属性名设置属性的常用方法:varprops{one:123,two:321}调用这个属性:<HelloWorld{props}>说明:{props},这里的三个点,代表props中的所有的属性react状态的调用this.


知识点:
1、react 属性的调用 this.props.被调用的属性名

设置属性的常用方法:
var props = {
one: '123',
two: 321
}
调用这个属性:

说明:{...props},这里的三个点,代表props中的所有的属性

react 状态的调用 this.state

this.getInitialState 默认状态的方法;
this.setState 修改状态的方法(经常用到)

this.setState.被修改的值

场景:修改默认属性名称name的值,并显示效果

1、初始化状态,默认状态
getInitialState: function(){
return {
name: 'tim',
}
}

2、改变状态,就会改变默认的值。给这个默认的值添加修改后获取元素的监听事件 event.target 只要默认值被改变,就会获取到这个改变后的值
handChange: function(event){
this.setState({name: event.target.value});
}

3、调用这个已经改变的状态的属性,显示已经改变的状态
render: function(){
return

HelloWorld,改变的值为{this.props.name}


}

 

基础知识点:

  • 必须引入的js:
  1. react.js
  2. JSXTransformer.js
  • 兼容旧版本浏览器(可选)
  1. console-polyfill.js
  2. es5-sham.min.js
  3. es5-shim.min.js
  4. jquery.min.js
  • 基础知识点:
  1. react 的默认的解析数据,生成JSX代码的方法:   render: function(){......}
  2. 渲染组件的方法:   React.render( JSX的代码块 , JSX代码渲染后的存储位置(展示效果的位置))
  3. JSX(Javascript Xml)  是在JS中编写XML的语言,官方文档:https//facebook.giuhub.io/jsx/
  4. JSX   首字母大写为自定义组件;首字母小写为DOM元素
  5. JSX   要注意3个点:元素名、子节点、节点属性
  6. 所有的html属性与class名称都采用驼峰命名方式:html要写成“htmlFor”;      class要写成"className";   否则会报错
  7. 写在style标签中的css样式,在react中要以对象的方式引用    
  8. {}大括号里不可以使用Javascript的语句,但可以使用表达式。用表达式来代替语句。
  9. script标签的type为text/jsx

推荐阅读
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 闭包一直是Java社区中争论不断的话题,很多语言都支持闭包这个语言特性,闭包定义了一个依赖于外部环境的自由变量的函数,这个函数能够访问外部环境的变量。本文以JavaScript的一个闭包为例,介绍了闭包的定义和特性。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文介绍了机器学习手册中关于日期和时区操作的重要性以及其在实际应用中的作用。文章以一个故事为背景,描述了学童们面对老先生的教导时的反应,以及上官如在这个过程中的表现。同时,文章也提到了顾慎为对上官如的恨意以及他们之间的矛盾源于早年的结局。最后,文章强调了日期和时区操作在机器学习中的重要性,并指出了其在实际应用中的作用和意义。 ... [详细]
  • 本文讨论了如何在codeigniter中识别来自angularjs的请求,并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax(),但都没有成功。最后,作者展示了一个ajax请求的示例代码。 ... [详细]
  • 突破MIUI14限制,自定义胶囊图标、大图标样式,支持任意APP
    本文介绍了如何突破MIUI14的限制,实现自定义胶囊图标和大图标样式,并支持任意APP。需要一定的动手能力和主题设计师账号权限或者会主题pojie。详细步骤包括应用包名获取、素材制作和封包获取等。 ... [详细]
  • iOS超签签名服务器搭建及其优劣势
    本文介绍了搭建iOS超签签名服务器的原因和优势,包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势,即一个证书只能安装100个,成本较高。文章还详细介绍了超签的实现原理,包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后,还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]
  • 本文讨论了如何使用Web.Config进行自定义配置节的配置转换。作者提到,他将msbuild设置为详细模式,但转换却忽略了带有替换转换的自定义部分的存在。 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • 本文介绍了如何使用n3-charts绘制以日期为x轴的数据,并提供了相应的代码示例。通过设置x轴的类型为日期,可以实现对日期数据的正确显示和处理。同时,还介绍了如何设置y轴的类型和其他相关参数。通过本文的学习,读者可以掌握使用n3-charts绘制日期数据的方法。 ... [详细]
  • 关于如何快速定义自己的数据集,可以参考我的前一篇文章PyTorch中快速加载自定义数据(入门)_晨曦473的博客-CSDN博客刚开始学习P ... [详细]
  • Hello.js 是一个用于连接OAuth2服务的JavascriptRESTFULAPI库,如Go ... [详细]
author-avatar
军魂永驻1971
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有