React 組件

本章節(jié)我們將討論如何使用組件使得我們的應(yīng)用更容易來管理。

接下來我們封住一個(gè)輸出 "Hello World！" 的組件，組件名為 HelloMessage：

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

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

嘗試一下 ?

實(shí)例解析：

React.createClass 方法用于生成一個(gè)組件類 HelloMessage。

<HelloMessage /> 實(shí)例組件類并輸出信息。

注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 HelloMessage 不能寫成 helloMessage。除此之外還需要注意組件類只能包含一個(gè)頂層標(biāo)簽，否則也會(huì)報(bào)錯(cuò)。

如果我們需要向組件傳遞參數(shù)，可以使用 this.props 對(duì)象,實(shí)例如下：

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

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

嘗試一下 ?

以上實(shí)例中 name 屬性通過 this.props.name 來獲取。

注意，在添加屬性時(shí)， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因?yàn)?class 和 for 是 JavaScript 的保留字。

復(fù)合組件

我們可以通過創(chuàng)建多個(gè)組件來合成一個(gè)組件，即把組件的不同功能點(diǎn)進(jìn)行分離。

以下實(shí)例我們實(shí)現(xiàn)了輸出網(wǎng)站名字和網(wǎng)址的組件：

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="W3Cschool教程" site=" http://www.w3cschool.cn" />,
  document.getElementById('example')
);

嘗試一下 ?

實(shí)例中 WebSite 組件使用了 Name 和 Link 組件來輸出對(duì)應(yīng)的信息，也就是說 WebSite 擁有 Name 和 Link 的實(shí)例。