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)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
随机推荐
- 一步一步深入spring(2)-三种方式来实例化bean
在一步一步深入spring(1)--搭建和测试spring的开发环境中提到了一种实例化bean的方式,也是最基本的使用构造器实例化bean 1.使用构造器实例化bean:这是最简单的方式,Spring ...
- .NET对象占内存多少
.NET对象占内存多少 一直有一个小小的疑惑——.NET一个对象或者一个集合占多少内存?有没有很快速的方法获取,而不是简单的估计分析对象大小? 查了MSDN,和一些其他人的分析,得到解决是托管代码对象 ...
- vsftp FTP服务器 server settings , and add different users
建议阅读知识:http://linux.vbird.org/linux_basic/0210filepermission.php 这是关于档案权限,用户,组等的问题.介绍的很有意思. 1. Inst ...
- 从零开始学C++之IO流类库(二):文件流(fstream, ifstream, ofstream)的打开关闭、流状态
一.文件流 ofstream,由ostream派生而来,用于写文件 ifstream,由istream派生而来, 用于读文件 fstream,由iostream派生而来,用于读写文件 二.打开文件 说 ...
- html5 PACS漫谈
2012年html5标准制定之后,其中canvas标签给程序猿提供了图像绘制的接口. 在医疗领域从事PACS开发的我发现BS结构的PACS系统开发有了新可能,不再需要客户端安装flash.active ...
- 手机无须ROOT不用修改hosts即可在本地测试安卓、苹果APP和H5应用
开发手机APP和 H5 应用经常需要在本地和线上环境分开测试,一般想到的操作都是修改hosts,我也一直这么干的,但手机上修改hosts是需要 ROOT权限的,这样太过麻烦,还有变砖头的风险,而且有些 ...
- iOS开发-文件操作
目录操作和文件管理 学习目标 1.理解单例 2.掌握NSFileManager类常用的文件管理操 3.掌握NSFileHandle类常用的文件数据操作 4.了解NSData类的常用操作 5.掌握Pli ...
- SQL Server 2016 的「動態資料遮罩 (Dynamic Data Masking)」
一些特別注重資訊安全.個人資料的公司或產業 (如: 金融.保險業),通常「測試用資料庫」的資料,會加上「遮蔽:去識別化」的功能,避免個資外洩.以往必須自己撰寫 SQL 語句或 Stored Proce ...
- js实现购买数量加减效果
写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案 结构: js代码: <script type="text/javascript"> function ...
- centos7配置开启无线网卡,重启防火墙
centos7配置无线网卡: 在虚拟机为nat的网络连接下(就是默认的那个),centos7默认网卡未激活. 可以设置 文件 /etc/sysconfig/network-scripts/ifcfg- ...