文档章节

从零开始学React(4)——自定义组件

筱飞
 筱飞
发布于 2016/05/16 18:24
字数 363
阅读 511
收藏 4

前一章是从零开始学React(3)——数组 http://my.oschina.net/u/2608629/blog/675799

从这一章开始,难度就加大了。首先,我们看一下什么是组件(component)。

React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

在HTML中一个标签就相当于一个组件,例如<div>,<img/>等都是组件。在这一章中,我们可以自己设计组件,然后自定义属性。

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="diy"></div>
<script type="text/babel">
	var NowTime = React.createClass({
		render : function (){
			return <div>现在{this.props.country}时间为:{new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds()}</div>;
		}
	});
	
	ReactDOM.render(
		<NowTime country="中国"/>,
		document.getElementById("diy")
	)
	
	
</script>
</body>
</html>

在这里我自定义了一个显示当前时间的组件<NowTime>,该组件有个country属性。使用该组件即可打印当前时间。

显示效果如图

注意点

  1. 组件第一个字母必须是大写
  2. 组件必须定义render方法,用于输入组件
  3. 在组件的return中,只能有一个顶级节点<div>,有多个时,会报错。
  4. 定义组件时设定this.props.xxx,这个xxx就是属性名。

在添加自定义组件属性时,设定class,for时,要写为className,htmlFor。因为class和for是javascript的关键字

© 著作权归作者所有

筱飞
粉丝 15
博文 145
码字总数 22847
作品 0
虹口
前端工程师
私信 提问
加载中

评论(3)

筱飞
筱飞 博主
还有,自己看懂,能写出来,能给别人讲。这是3步。项目经验也是自己私下学习的不同。
筱飞
筱飞 博主
是的啊,这个我是当做笔记的用的。技术很容易忘掉的,可以当我以后的复习资料
ios122
ios122
....感觉LZ在自嗨啊,这些不都是官方文档上的基础吗? 写这篇文章的功夫,足够你把整个文档阅读一遍了; 建议而已
从零开始学React(3)——数组

前一章是从零开始学React(2)——React语法 http://my.oschina.net/u/2608629/blog/675744 在JXS中,我们可以把要显示的内容放入一个数组。然后,打印出来。即使数组中放的元素有嵌套关系也没...

筱飞
2016/05/16
351
0
从零开始学React(2)——React语法

前一章内容是从零开始学React(1)—— http://my.oschina.net/u/2608629/blog/675631 第一章,我们会使用render()方法了,这里。我们做更深入的研究。 先上demo 上图运行结果如下: 在JXS语句中...

筱飞
2016/05/16
131
0
ReactNative从零开始笔记3-state(状态)与props(属性)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、 props(属性) ReactNative(React)使用两种数据来控制一个组件:props 和 stat...

摸着石头过河_崖边树
01/18
0
0
ReactNative从零开始笔记4-PropTypes使用

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、PropTypes的简介 1.自定义组件的时候暴露属性到外界时候,外界调用组件具有属性...

摸着石头过河_崖边树
01/17
0
0
前端开发之路--启航篇

开始之前 2017年结束还有一个月;总想学点前端的知识;甚至学习前端框架思想。这里将会开启一个前端的学习摘要和笔记记录。 前端工程——基础篇 从本质上讲,所有Web应用都是一种运行在网页浏...

weir_will
2017/12/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部