React 元件


React 元件

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

接下來我們封住一個輸出"Hello World！" 的元件，元件名稱為HelloMessage：

##實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello World！</h1>;
        }
      });

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

執行實例»點擊"運行實例" 按鈕查看線上實例

實例解析：

React.createClass 方法用於產生一個元件類別HelloMessage。

<HelloMessage /> 實例元件類別並輸出訊息。

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

如果我們需要傳遞參數給元件參數，可以使用

this.props  物件,實例如下：

實例

##
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

      ReactDOM.render(
        <HelloMessage name="php" />,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

運行實例»
點擊"運行實例"按鈕查看線上實例

以上實例中
name

屬性透過this. props.name 來取得。

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

複合元件

我們可以透過建立多個元件來合成一個元件，也就是把元件的不同功能點分開。

以下實例我們實作了輸出網站名稱和網址的元件：

實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
   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="php中文网" site=" http://www.php.cn" />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

##執行實例»

點擊"運行實例" 按鈕查看線上實例

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

←
→