<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. 在 Mac OS X 上创建的 .NET 命令行程序访问数据库 （使用Entity Framework 7 ）

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  2. 转:关于BFC的初步了解以及常见使用

    在学习CSS的过程中,掌握一些常用方法或效果实现的原理对于我们的学习来说是很有帮助的.如最常见的清除浮动和取消外边距塌陷时使用overflow:hidden;,在学习初期往往只知道有这种用法,且使用时 ...

  3. low到一定程度了

  4. JSP中<base href="<%=basePath%>">作用

    通常在JSP页面开通有如下代码: <% String path = request.getContextPath(); String basePath = request.getScheme() ...

  5. weui 问题

    1.阻止checkbox 被 checked 方法1: $('.weui-check').on('click', function(e){ $(this).attr('disabled', true) ...

  6. nginx日志格式来分析网站访问速度与瓶颈

    参考地址:http://www.ttlsa.com/nginx/nginx-modules-ngx_http_log_request_speed/ 查看nginx 安装模块和配置 /usr/local ...

  7. 用CSS3的transform来做一个立方体

    有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...

  8. springMVC静态文件访问

        web.xml文件  <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xs ...

  9. 用Win7自带的磁盘管理工具给硬盘分区

    最近新买了一台笔记本,要给硬盘分几个区,心想还是用个工具方便点,于是就上网准备下个“硬盘分区魔术师”,但是看到有一篇文章介绍Win7系统也自带了硬盘分区工具,这我以前倒没听说过,试了一下,还挺方便好用 ...

  10. Web利器---fidder使用

    fiddler工具,主要看中其三点优势:1.功能强大,其他工具有的功能它也有,其他工具没有的功能它也有,支持http,https,ftp等协议:2.完全免费,长期免费.3.所有的浏览器可以使用,所有的 ...