<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>

<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>

<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var HelloMessage = React.createClass({
render:function(){
return <h1>现在时间 {this.props.date.toTimeString()},名字是：{this.props.name}</h1>;
}
});

setInterval(function () {
React.render(
<HelloMessage date={new Date()} name="hello" />,
document.getElementById('example')
);
},500)
</script>
</body>

在HelloMessage组件中，传入了一个date属性和name属性，对应的是一个Date对象，和一个字符串

 在组件中，通过 this.props.date 拿到Date对象,和name，调用它的toTimeString方法。

 而且本例中我们是用了一个定时器，每500ms我们实例化渲染一次组件，更新时间的值。

 <HelloWorld date={new Date()}/> 这是jsx语法，有点类似于HTML5自定义语义标签吧。

 可以这么理解，每一个标签就是一个组件，一个对象，因为我们是用的React.createClass方法去创建的，从方法名上就可以看出。

js中 toTimeString() 方法可把 Date 对象的时间部分转换为字符串，并返回结果。

变量HelloMessage就是一个组件类。模板插入<HelloMessage/>时，会自动生成HelloMessage的一个实例（下文的“组件”都指组件类的实例）。所有组件类都必须有自已的render方法，用于输出组件。

组件的用法与原生的HTML标签完全一致，可以任意加入属性，比如<HelloMessage name=”John”/>，就是HelloMessage组件加入一个name属性，值为John。组件的属性可以在组件类的this.props对象上获取，比如name属性就可以通过this.props.name读取。

添加组件属性，有一个地方需要注意，就是class属性需要写成className，for属性需要写成htmlFor，这是因为class和for是JavaScript的保留字。

 

react3 组件的更多相关文章

  1. ExtJS 4.2 评分组件

    上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...

  2. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  3. react-router 组件式配置与对象式配置小区别

    1. react-router 对象式配置 和 组件式配置    组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...

  4. Angular2入门系列教程3-多个组件，主从关系

    上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

  5. Angular2入门系列教程2-项目初体验-编写自己的第一个组件

    上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...

  6. .NET Core 首例 Office 开源跨平台组件（NPOI Core）

    前言 最近项目中,需要使用到 Excel 导出,找了一圈发现没有适用于 .NET Core的,不依赖Office和操作系统限制的 Office 组件,于是萌生了把 NPOI 适配并移植到 .NET C ...

  7. .NetCore中的日志（1）日志组件解析

    .NetCore中的日志(1)日志组件解析 0x00 问题的产生 日志记录功能在开发中很常用,可以记录程序运行的细节,也可以记录用户的行为.在之前开发时我一般都是用自己写的小工具来记录日志,输出目标包 ...

  8. BootStrap_02之全局样式及组件

    1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...

  9. ExtJS 4.2 组件介绍

    目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...

随机推荐

  1. Accordion - 手风琴

    //手风琴效果 <div style="overflow:hidden;height:400px;width:948px;"> <div class=" ...

  2. bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8)

    bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8) Q: hubery@roaster:~$ locale loc ...

  3. 向MySql数据库导入excel表数据

    最近要开发一个小的答题系统,如果题目人工录入那确实很麻烦.所以想到是不是可以从用一些现有数据格式的文件导入数据.在网上查了一下,看到有关于将excel的数据导入到mysql的方法.所以将题库数据整理成 ...

  4. INotifyPropertyChanged接口的PropertyChanged 事件

    INotifyPropertyChanged 接口用于向客户端(通常是执行绑定的客户端)发出某一属性值已更改的通知. 例如,考虑一个带有名为 FirstName 属性的 Person 对象. 若要提供 ...

  5. zmq学习笔记

    1 zmq_socket(3) Manual Page 1.1 一个socket可连接多个对端socket: 通过使用多个zmq_connect() 1.2 一个socket可绑定到多个地址上接受连接 ...

  6. [XAF] Simplifying integration of custom controls bound to data from XAF application database

    ASP.NET:  http://www.screencast.com/t/OHhcHD9vy WinForms: http://www.screencast.com/t/8M8K4eskkYO9

  7. d3 API axis

    场景 1.画网格线 使用方法.innerTickSize(): 指定内刻度大小 或者 .tickSize(inner, outer): 2.内外刻度线 innerTickSize outerTickS ...

  8. 解决 504 Gateway Time-out和502 Bad Gateway(nginx)

    504 Gateway Time-out 问题所在: 所请求的网关没有请求到,简单来说就是没有请求到可以执行的PHP-CGI. 一般看来, 这种情况可能是由于nginx默认的fastcgi进程响应的缓 ...

  9. 详解spring事务属性

    Spring声明式事务让我们从复杂的事务处理中得到解脱.使得我们再也无需要去处理获得连接.关闭连接.事务提交和回滚等这些操作.再也无需要我们在与事务相关的方法中处理大量的try…catch…final ...

  10. 【腾讯Bugly干货分享】从0到1打造直播 App

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/5811d42e7fd6ec467453bf58 作者:李智文 概要 分享内容: ...