方法一（不傳參）：
創(chuàng)建組件：
? ??var HelloMessage = React.createClass({?
?????????render: function() {?
?????????????return <h1>Hello World！</h1>;
? ????????}
????});
使用組件：
????ReactDOM.render(?
? ? ????<HelloMessage />,
? ? ????document.getElementById('example')
????);
方法二（向組件傳參==>使用?this.props?對(duì)象）：
創(chuàng)建組件：
? ??var HelloMessage = React.createClass({?
?????????render: function() {?
?????????????return <h1>Hello {this.props.name}</h1>;
? ????????}
????});
使用組件：
????ReactDOM.render(?
? ? ????<HelloMessage />,
? ? ????document.getElementById('example')
????);
方法三（復(fù)合組件即多個(gè)組件組件成一個(gè)組件）：
? ? // 組件一
? ??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>? ? ?
? ? ????????);
????????}
????});
? ? // 輸出頁(yè)面
????ReactDOM.render(
????????<WebSite name="菜鳥教程" site=" http://www.runoob.com" />,
????????document.getElementById('example')
????);
