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

时间 2019-11-17

原文原文链接

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

从这一章开始，难度就加大了。首先,咱们看一下什么是组件（component）。html

React 容许将代码封装成组件（component），而后像插入普通 HTML 标签同样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。java

在HTML中一个标签就至关于一个组件，例如<div>,<img/>等都是组件。在这一章中，咱们能够本身设计组件，而后自定义属性。react

<!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属性。使用该组件便可打印当前时间。数组

显示效果如图babel

注意点dom

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

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