React 組件

四、組件

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

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

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

上面代碼中，變量 HelloMessage 就是一個(gè)組件類(lèi)。模板插入 時(shí)，會(huì)自動(dòng)生成 HelloMessage 的一個(gè)實(shí)例（下文的"組件"都指組件類(lèi)的實(shí)例）。所有組件類(lèi)都必須有自己的 render 方法，用于輸出組件。

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

添加組件屬性，有一個(gè)地方需要注意，就是 class 屬性需要寫(xiě)成 className ，for 屬性需要寫(xiě)成 htmlFor ，這是因?yàn)?class 和 for 是 JavaScript 的保留字。