從零開始學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