[react 基礎篇]——React.createClass(）方法同時創建多個組件類

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(）方法總結

1. 所有組件類都必須有自己的 render 方法，用於輸出組件。
2. 組件類的第一個字母必須大寫，否則會報錯
3. 組件類只能包含一個頂層標簽，否則也會報錯。
4. 組件的屬性可以在組件類的 this.props 對象上獲取
5. 添加組件屬性，有一個地方需要注意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。

后話

　　react 組件創建方式有三種，下一篇具體說說哪三種？有何區別？怎么選擇適合自己的？