react 组件使用的小记第一天
//定义一个子组件
var Child = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick:function(){
this.setState({liked: !this.state.liked});
},
render:function(){
var text = "111";
if(this.state.liked){
text = "222";
}else{
text = "111";
}
return <div onClick={this.handleClick}>{text}</div>
}
})
//自定义一个父组件
var Parent = React.createClass({
render:function(){
return <div>
<Child name={this.props.name}/>
</div>
}
})
//定义要传递的数据
var arr01 = "我是定义大数据--hellow wrod!!!";
//实例化render
ReactDOM.render(
<div>
<Parent name={arr01}/>
</div>,
document.getElementById('page')
)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="page"></div>
<script type="text/babel" src="demo1.js"></script>
</body>
</html>
react 组件使用的小记第一天的更多相关文章
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
- React组件性能优化
转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...
- React组件
React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...
- react 组件的生命周期
组件的生命周期 过程 装载(Mounting) :组件被插入到 DOM 中: 更新(Updating) :组件重新渲染以更新 DOM: 卸载(Unmounting) :组件从 DOM 中移除. 过程 ...
- 从性能角度看react组件拆分的重要性
React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...
- 如何优雅的设计 React 组件
作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...
- 如何优雅的设计React组件
如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- React 组件间通讯
React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...
随机推荐
- 洛谷 P1193 洛谷团队训练VS传统团队训练
P1193 洛谷团队训练VS传统团队训练 题目背景 “在中学的信息学教育领域,洛谷无疑是一个相当受欢迎的辅助网站.同时有百余所学校正在通过洛谷进行信息学竞赛(以后简称OI)的教育.洛谷之所以如此受欢迎 ...
- 安装xcode6 beta 后调试出现Unable to boot the iOS Simulator以及编译苹果官方Swift的demo报错failed with exit code 1的解决的方法
苹果昨天公布新语言Swift(雨燕),须要安装xcode6 以及mac os 系统为10.9以上. (xcode6 beta 可在官方下载.须要登录开发人员账号:mac os 系统直接更新就可以.在此 ...
- Invalid project description.
1.错误描写叙述 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...
- SqlServer 错误日志切换和查看
Sql Server 日志 和 代理错误日一般在实例重新启动后自己主动切换,假设实例久未重新启动,将可能积累太多的日志,不方便查看. 查看错误日志大小: --查看日志大小 EXEC xp_enumer ...
- sicily 1000. LinkedList
Description template <typename E> class LinkedList { private: // inner class: linked-list ...
- 如何设置eclipse代码自动提示功能
如何设置eclipse代码自动提示功能 我们在刚安装完使用eclipse进行开发时,会发现没有代码提示会非常的不方便,下面小编将告诉你如何进行代码自动提示的设置. 工具/原料 eclipse 电脑 ...
- PostgreSQL Replication之第七章 理解Linux高可用（3）
7.3 高可用软件的历史 有大量的专有的和开源的高可用性软件.专有的例子有:Solaris Cluster (有时称为Sun 集群 or SunCluster), SteelEye LifeKeepe ...
- 如何用Java实现反转排序
摘要:反转排序是将原先已经排序好了的重新排序,是原来的数组元素的顺序反转过来.假设原来的数组顺序是{6,5,4,3,2,1},反转之后的顺序就是{1,2,3,4,5,6}.这个排序的算法不是很难,代码 ...
- 51Nod 活动安排问题（排序+优先队列）
有若干个活动,第i个开始时间和结束时间是[Si,fi),同一个教室安排的活动之间不能交叠,求要安排所有活动,最少需要几个教室? Input 第一行一个正整数n (n <= 10000)代表活动的 ...
- CentOS7-1810 系统Samba配置说明
Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件.SMB(Server Messages Block,信息服务块)通信协议是微软(Microsoft)和英特尔(Intel)在198 ...