前一章是从零开始学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属性。使用该组件即可打印当前时间。
显示效果如图
注意点
- 组件第一个字母必须是大写
- 组件必须定义render方法,用于输入组件
- 在组件的return中,只能有一个顶级节点<div>,有多个时,会报错。
- 定义组件时设定this.props.xxx,这个xxx就是属性名。
在添加自定义组件属性时,设定class,for时,要写为className,htmlFor。因为class和for是javascript的关键字