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 的项目,那我们项目应该有如下类似的关系: 父 ...
随机推荐
- ASP.NET-跨站伪造请求CSRF
经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击,在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可Html.Ant ...
- 如何用一次性密码通过 SSH 安全登录 Linux
有人说,安全不是一个产品,而是一个过程.虽然 SSH 协议被设计成使用加密技术来确保安全,但如果使用不当,别人还是能够破坏你的系统:比如弱密码.密钥泄露.使用过时的 SSH 客户端等,都能引发安全问题 ...
- Extjs4.2 tooltip 提示宽度问题解决
在Extjs4.2 的tooltip 提示,宽度被限制在了40px,感觉非常别扭,是个BUG,解决的方法,在ext-all-debug.js或ext-all.js中,找到例如以下的代码: Ext.de ...
- otto源代码分析
otto这个开源项目是一个event bus模式的消息框架.用于程序各个模块之间的通信.此消息框架能够使得各个 模块之间降低耦合性. 此项目是支付公司square一个开源项目,项目托管于github ...
- spring注解中@component是什么意思
@Component("userManager") public class UserManagerImpl implements UserManager { private Us ...
- vue -- 7 个 有用的 Vue 开发技巧
1 状态共享 随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vu ...
- Android--Fragment与Activity通信
package com.example.testfragment; import com.example.testfragment.MainFargment.BackString; import an ...
- Kali linux 2016.2（Rolling）中metasploit的搜集特定地址的邮件地址
不多说,直接上干货! 使用search_email_collector搜集特定地址的邮件地址 search_email_collector 要求提供一个邮箱后缀,通过多个搜索引擎的查询结果分析使用此后 ...
- Android项目实战（五十五）：部分机型点击home再点图标进入程序不保留再之前界面的问题
解决办法: 1.在基类Activity中 添加方法 @Override public boolean moveTaskToBack(boolean nonRoot) { return super.mo ...
- iOS——集成支付宝 private key is NULL
问题描述:将生成的私钥,写进官方demo,还是一直报错:rsa_private read error : private key is NULL 解决方案:需要将RSA私钥转换成PKCS8格式