热门标签 | 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

推荐阅读
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社区 版权所有