四.组件
React 允许代码封装成组件(component),然后向插入HTML一样,在网页中插入组件。React.createClass方法就用于生成一个组件类。
<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render:function(){
return <h1>Hello {this.props.name}</h1>;
}
})
ReactDOM.render(
<HelloMessage name='John' />,
document.getElementById("example")
)
</script>
</body>
</html>
上面代码中,变量HelloMessage就是一个组件类,模板插入<HelloMessage />时,会自动生成HelloMessage的一个实例。
所有的组件都有自己的render方法。用于输出组件。
注意:组件类的第一个字母必须大写,否则会报错。比如HelloMessage
不能写成helloMessage
。另外组件类只能包含一个顶层标签。否则也会报错。
var HelloMessage = React.createClass({ render: function() { return <h1> Hello {this.props.name} </h1><p> some text </p>; } });
上面代码会报错,因为HelloMessage
组件包含了两个顶层标签:h1
和p
。
组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloMessage name="John">
,就是 HelloMessage
组件加入一个 name
属性,值为 John
。组件的属性可以在组件类的 this.props
对象上获取,比如 name
属性就可以通过 this.props.name
读取。上面代码的运行结果如下。