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="w3big" />, 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> ); } }); React.render( <WebSite name="本教程" site=" http://www.w3big.com" />, document.getElementById('example') );
實例中WebSite 組件使用了Name 和Link 組件來輸出對應的信息,也就是說WebSite 擁有Name 和Link 的實例。