<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. flask_日期和时间

    不知道大家有没有发现,在我们学习flask的过程中,post的timestamp字段添加时间时一直用的是datetime.utcnow()来获取时间,但是它获取的时间跟本地时间不一样,下面我们来测试一 ...

  2. Linux下Chrome浏览器不支持WebGL的解决方式。

    今天使用Chrome浏览器,总是报这样一个错误: Uncaught TypeError: Cannot read property 'canvas' of null. 细看之下是无法获取WebGL上下 ...

  3. （01背包 排序+特判）饭卡（hdu 2546）

    http://acm.hdu.edu.cn/showproblem.php?pid=2546   Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额 ...

  4. ASP.Net的导出Excel的快速方法，DataTable导出Excel（亲测，非原创）

    //使用方法 ExcelHelper.dataTableToCsv(dt,@"D:\1212.xls");System.Diagnostics.Process.Start(@&qu ...

  5. 'MAMapKit/MAMapKit.h' file not found

    1.应该是derived data没清导致的.在Window -> Organizer -> Projects,找到你这个项目,然后点下右边derived data后边的delete按钮. ...

  6. 屏幕适配1（Android 增强版百分比布局库 为了适配而扩展）

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 这篇博文写得太好了,让我很激动,分 ...

  7. php跨域请求

    跨域api服务器设置 header('content-type:application:json;charset=utf8'); header('Access-Control-Allow-Origin ...

  8. redhat7 yum安装

    redhat 的更新包只对注册的用户生效,所以我们自己手动更改成CentOS 的更新包,CentOS几乎和redhat是一样的,所以无需担心软件包是否可安装,安装之后是否有问题,另外CentOS公司去 ...

  9. Silverlight5中横向显示ListBox

    备忘 <ListBox x:Name="Cpbrow" HorizontalAlignment="Left" Height="153" ...

  10. 【转】js写显示农历的日期

    网上查找了个,记录下. <body> <!-- 中国农历开始 --> <SCRIPT language=JavaScript> <!-- var lunarI ...