//定义一个子组件
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 组件使用的小记第一天的更多相关文章

  1. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  2. React组件性能优化

    转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...

  3. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

  4. react 组件的生命周期

    组件的生命周期 过程 装载(Mounting) :组件被插入到 DOM 中: 更新(Updating) :组件重新渲染以更新 DOM: 卸载(Unmounting) :组件从 DOM 中移除. 过程 ...

  5. 从性能角度看react组件拆分的重要性

    React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...

  6. 如何优雅的设计 React 组件

    作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...

  7. 如何优雅的设计React组件

    如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...

  8. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  9. React 组件间通讯

    React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...

随机推荐

  1. 洛谷 P1220 关路灯 （贪心+区间dp）

    这一道题我一直在想时间该怎么算. 看题解发现有个隐藏的贪心. 路径一定是左右扩展的,左右端点最多加+1(我竟然没发现!!) 这个性质非常重要!! 因此这道题用区间dp f[i][j]表示关完i到j的路 ...

  2. LibSVM-windows

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50112477 官方Web: https ...

  3. linux系统调用表(system call table)

    系统调用号 函数名 入口点 源码 0 read sys_read fs/read_write.c 1 write sys_write fs/read_write.c 2 open sys_open f ...

  4. ASIHTTPRequest 框架的导入

    刚接触ios 对一切都不熟悉  记录一下ASIHTTPRequest 框架的导入 步骤 以便日后再用 1.首先下载ASIHTTPRequest:点击下载 2.在project中导入下面文件: 导入方式 ...

  5. 代理server poll version

    poll和select一样,管理多个描写叙述符也是进行轮询,依据描写叙述符的状态进行处理,可是poll没有最大文件描写叙述符数量的限制,select is 1024/2048 #include &qu ...

  6. POJ 1012 Joseph(打表题)

    题意:约瑟夫环的变形.要求寻找到一个杀人循环节m使后半节的坏人先被所有杀光. 直接链表模拟出结果,再打表即可: 代码:(凝视的是打表码) #include<iostream> #inclu ...

  7. How to: Create Custom Configuration Sections Using ConfigurationSection

    https://msdn.microsoft.com/en-us/library/2tw134k3.aspx You can extend ASP.NET configuration settings ...

  8. 2.mongoDB 介绍（特点、优点、原理）

    转自:https://www.cnblogs.com/hoojo/archive/2011/06/01/2066119.html 介绍:MongoDB是一个基于分布式文件存储的数据库.由C++语言编写 ...

  9. SparkCore基础（二）

    * SparkCore基础(二) 继续探讨SparkCore,开门见山,不多废话. SparkApplication结构探讨 包含关系: 之前我们运行过很多App了,其实每一个App都包含若干个Job ...

  10. 把ISO文件当作光盘挂载

    当不能挂载光盘或者U盘时候,只需要把ISO文件传到某个目录中,比如/data下,即可挂载,如下所示:   mount -o loop /data/rhel-server-6.3-x86_64-dvd. ...