react 組件
React 允許將代碼封裝成組件(component),然后像插入普通 HTML 標簽一樣,在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類
一個組件創建
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="fannieGirl" />, document.getElementById('example') );
兩個組件創建
var HelloMessage1 = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); var HelloMessage2 = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <div> <HelloMessage1 name="fannie" /> <HelloMessage2 name="Girl" /> </div>, document.getElementById('example') );
同時創建多個組件,在ReactDOM.render()只能有一個頂層標簽,不然會報錯的
React.createClass()方法總結
- 所有組件類都必須有自己的
render
方法,用於輸出組件。 - 組件類的第一個字母必須大寫,否則會報錯
- 組件類只能包含一個頂層標簽,否則也會報錯。
- 組件的屬性可以在組件類的
this.props
對象上獲取 - 添加組件屬性,有一個地方需要注意,就是
class
屬性需要寫成className
,for
屬性需要寫成htmlFor
,這是因為class
和for
是 JavaScript 的保留字。
后話
react 組件創建方式有三種,下一篇具體說說哪三種?有何區別?怎么選擇適合自己的?