React 組件

四、組件

React 允許將代碼封裝成組件（component），然后像插入普通 HTML 標簽一樣，在網(wǎng)頁中插入這個組件。React.createClass 方法就用于生成一個組件類（查看 demo04）。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

React.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

上面代碼中，變量 HelloMessage 就是一個組件類。模板插入 時，會自動生成 HelloMessage 的一個實例（下文的"組件"都指組件類的實例）。所有組件類都必須有自己的 render 方法，用于輸出組件。

組件的用法與原生的 HTML 標簽完全一致，可以任意加入屬性，比如 ，就是 HelloMessage 組件加入一個 name 屬性，值為 John。組件的屬性可以在組件類的 this.props 對象上獲取，比如 name 屬性就可以通過 this.props.name 讀取。上面代碼的運行結(jié)果如下。

添加組件屬性，有一個地方需要注意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。