React入门教程（三）—— this.props

 this.props

React允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件。

//定义一个名为Hello的组件
//用方法React.createClass来创建一个组件
var Hello = React.createClass({
//每一个组件中必须有一个render方法，用于输出组件
render: function() {
//使用return来返回要输出的内容
return <h1>Hello {this.props.name}</h1>;
}
});

ReactDOM.render(
//插入模板<Hello />时，会生成Hello的一个实例，组件类的第一个字母必须大写
<Hello name="wang" />,
document.getElementById('example')
);

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如

<Hello
name="wang">

，就是

Hello

组件加入一个

name

属性，值为

wang

。组件的属性可以在组件类的

this.props

对象上获取，比如

name

属性就可以通过

this.props.name

读取。