Latest web development tutorials

React 組件

本章節我們將討論如何使用組件使得我們的應用更容易來管理。

接下來我們封裝一個輸出"Hello World!" 的組件,組件名為HelloMessage:

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

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

嘗試一下»

實例解析:

React.createClass方法用於生成一個組件類HelloMessage

<HelloMessage />實例組件類並輸出信息。

注意,原生HTML 元素名以小寫字母開頭,而自定義的React 類名以大寫字母開頭,比如HelloMessage 不能寫成helloMessage。 除此之外還需要注意組件類只能包含一個頂層標籤,否則也會報錯。

如果我們需要向組件傳遞參數,可以使用this.props對象,實例如下:

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

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

嘗試一下»

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

注意,在添加屬性時, class 屬性需要寫成className ,for 屬性需要寫成htmlFor ,這是因為class 和for 是JavaScript 的保留字。


複合組件

我們可以通過創建多個組件來合成一個組件,即把組件的不同功能點進行分離。

以下實例我們實現了輸出網站名字和網址的組件:

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

嘗試一下»

實例中WebSite 組件使用了Name 和Link 組件來輸出對應的信息,也就是說WebSite 擁有Name 和Link 的實例。