# React 組件 本章節我們將討論如何使用組件使得我們的應用更容易來管理。 接下來我們封裝一個輸出 "Hello World！" 的組件，組件名為 HelloMessage： ~~~ var HelloMessage = React.createClass({ render: function() { return <h1>Hello World！</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') ); ~~~ ## 實例解析： React.createClass 方法用于生成一個組件類 HelloMessage。 <HelloMessage /> 實例組件類并輸出信息。 > 注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 HelloMessage 不能寫成 helloMessage。除此之外還需要注意組件類只能包含一個頂層標簽，否則也會報錯。 如果我們需要向組件傳遞參數，可以使用 this.props 對象,實例如下： ~~~ var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="Runoob" />, document.getElementById('example') ); ~~~ 以上實例中 name 屬性通過 this.props.name 來獲取。 > 注意，在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。 ## 復合組件 **點評：復合組件例子** 我們可以通過創建多個組件來合成一個組件，即把組件的不同功能點進行分離。 以下實例我們實現了輸出網站名字和網址的組件： ~~~ var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }); ReactDOM.render( <WebSite name="菜鳥教程" site=" http://www.runoob.com" />, document.getElementById('example') ); ~~~ 實例中 WebSite 組件使用了 Name 和 Link 組件來輸出對應的信息，也就是說 WebSite 擁有 Name 和 Link 的實例。