## 四、组件 React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类(查看 [demo04](https://github.com/ruanyf/react-demos/blob/master/demo04/index.html))。 > ~~~ > var HelloMessage = React.createClass({ > render: function() { > return <h1>Hello {this.props.name}</h1>; > } > }); > > React.render( > <HelloMessage name="John" />, > document.getElementById('example') > ); > ~~~ 上面代码中,变量 HelloMessage 就是一个组件类。模板插入 时,会自动生成 HelloMessage 的一个实例(下文的"组件"都指组件类的实例)。所有组件类都必须有自己的 render 方法,用于输出组件。 组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 ,就是 HelloMessage 组件加入一个 name 属性,值为 John。组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。 ![](https://box.kancloud.cn/2015-09-27_56077141a44db.png) 添加组件属性,有一个地方需要注意,就是 class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。