react学习笔记-02
1.组件嵌套
React允许将代码封装成一个component,然后像html标签一样,插入网页中中。
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); 6 var ParentContainer = React.createClass({ render: function() { return ( <div> <HelloMessage name={this.props.name} /> <HelloMessage name={this.props.name} /> </div> ); } }); ReactDOM.render( <ParentContainer className="className" name="bella" />, document.getElementById('example') );
组件嵌套注意规则:
首字母要大写,否则会报错;
组件类只能包含一个顶层标签,否则会报错
class属性需要写成className(因为jsx兼容Js语法,所以在模板中不要写js关键字)
for要用htmlFor(道理同上)
2.组件通信
要了解组件通信,首先得了解props和state两个属性.
1.props一般是不可变的,state是可变的
2.子组件间通过Props进行数据传递,this.props就是调用该组件传来的属性
3.state可以根据与用户交互来改变。
因此我们可以在父组件中设置state,通过props将state值传递给子组件,这种方式就实现了父组件-子组件之间的通信
这是菜鸟教程上的一个demo:
return { name: "菜鸟教程", site: "http://www.runoob.com" }; }, render: function() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }); React.render( <WebSite />, document.getElementById('example') );
react学习笔记-02的更多相关文章
- 软件测试之loadrunner学习笔记-02集合点
loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习笔记(一)- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- 机器学习实战(Machine Learning in Action)学习笔记————02.k-邻近算法(KNN)
机器学习实战(Machine Learning in Action)学习笔记————02.k-邻近算法(KNN) 关键字:邻近算法(kNN: k Nearest Neighbors).python.源 ...
- OpenCV 学习笔记 02 使用opencv处理图像
1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...
- React学习笔记(七)条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记(六)事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记(五)State&声明周期
React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
随机推荐
- 对dump脱壳的一点思考
对dump脱壳的一点思考 偶然翻了一下手机日历,原来今天是夏至啊,时间过的真快.ISCC的比赛已经持续了2个多月了,我也跟着比赛的那些题目学了2个月.......虽然过程很辛苦,但感觉还是很幸运的,能 ...
- Bek Trak Trik for wireless WPA/WPA2 & SSH & email
FOR wireless tools: hydra, medusa, crunch, aircrack-ng packages (airodump-ng, airmon-ng, aircrack-ng ...
- Android屏幕相关设置
锁屏设置: 1. 初始值 : <integer name="def_screen_off_timeout">60000</integer> 2. 数据库/d ...
- java中的public,protected,private权限修饰
public和private基本没问题,主要是默认的和protected之间的区别 同一包中默认的和protected一样,所以来看看不同包的情况 看下如下代码,两个类位于不同包: public cl ...
- Mybatis原理图
Mybatis原理图 MyBatis 是一个基于Java的持久层框架.它提供的持久层框架包括SQL Maps和Data Access Objects(DAO). MyBatis 是支持普通 SQL查询 ...
- Node.js中读取文件后用Json.parse方法报错
今天,在调试一个node项目时,发现了一个很大的坑,在此分享给大家! 大家都知道,Json.parse()方法对格式要求是很严格的,格式不对极其容易报错,但是有时候格式看似是正确的也会报错. 比如这一 ...
- ELK采集之nginx 之高德地图出城市IP分布图
1.采用拓扑: 角色扮演: Agent:采用logstash,IP:192.168.10.7 Redis队列: IP:192.168.10.100 Indexer:logstash,IP:192.16 ...
- [转载]关于shell脚本的基本语法
关于shell脚本的基本语法 整理于:2014-03-31,何俭飞,mymladdr@sina.com 一.执行 1.shell脚本如果要被执行,一般地必须要有执行权限"x"(除了 ...
- python3的文件读写模式
任何一种语言,文件的读写都是非常常见的.python的文件读写非常简单,仅仅一个函数open(file也可以,但是我不常用). 先看看官网的解释: open(file, mode='r', buffe ...
- 【游记】NOIP2015造纸记
题目来自HZWER学长的名言:“虽然已经做好了学OI就是打铁的准备.” 然后我发现我已经不是打铁,只能造纸了啊_(:3LZ_) [DAY0] 中午吃了饭才1:00,说好2:30才出发于是各种闲逛.2: ...