React入門介紹（2）- React Component-React組件

React Component-React組件

允許用戶自由封裝組件是React非常突出的特性，用戶可將自己創建的組件像普通的HTML標簽一樣插入頁面，React.CreateClass方法就是用來創建一個組件類的。在創建和調用react組件時有幾點需要注意，我們在實際的demo中進行總結。
從一個簡單的例子開始，我們嘗試創建一個包含文本框和提交按鈕的組件：

    <div id="container"></div>
    <script type="text/babel">
      let InputWithButton = React.createClass({
        render:function(){
          return(
            <div>
              <input type="text" value="password"/> 
              <button>Submit</button>               
            </div>
          ) 
        }
      });
      ReactDOM.render(
        <InputWithButton/>,
        document.getElementById("container")
      )
    </script>

運行上述代碼，顯示結果如下：

在上述代碼中，需要注意以下幾點：

1. 我們創建了一個名為InputWithButton的組件類，注意此處命名首字母必須大寫，自動生成InputWithButton實例。
2. 所有的組件都必須要有自己的render方法，用以輸出組件。
3. 在創建組件類時，return的最終結果內只能包含一個頂級標簽，如果我們在上例中去掉div標簽直接返回<input>和<button>，代碼會報錯。
4. 組件的用法與原生HTML的用法一致，直接在ReactDOM.render中插入<InputWithButton/>,注意"/"不能丟，在jsx解析時會根據"/"判斷標簽的閉合。
   另外，像原生的HTML標簽一樣，可以給組件添加屬性，參考如下代碼：

    <div id="container"></div>
    <script type="text/babel">
      let InputWithButton = React.createClass({
        render:function(){
          return(
            <div>
              <input type="text" value={this.props.value} className="input"/>
              <button>{this.props.name}</button>
            </div>
          ) 
        }
      });
      ReactDOM.render(
        <InputWithButton name="confirm" value="password"/>,
        document.getElementById("container")
      )
    </script>

5. 如上例中調用<InputWithButton/>標簽時，添加的name和value屬性,在創建組件類時，可以通過this.props對象是獲取組件的屬性,在input通過this.props.value給value賦值，在button中通過this.props.name賦值，注意都要包裹在{}內。
6. 添加屬性時需要注意添加class屬性時要用className,for屬性用htmlFor,這是因為class和for是JavaScript的保留字。
   在使用this.props對象獲取屬性時，需要注意比較特殊的this.props.children，他表示組件的所有子節點。

    <div id="container"></div>
    <script type="text/babel">
      let FormList = React.createClass({
        render:function(){
          return(
            <form>
              {
                React.Children.map(this.props.children,function(child){
                  return <button>{child}</button>;
                })
              }
            </form>
          ) 
        }
      });

      ReactDOM.render(
        <FormList>
            <span>Submit</span>
            <span>Clear</span>
            <span>Cancel</span>  
        </FormList>,
        document.getElementById("container")
      )
    </script>

如上代碼，我們嘗試創建一個包含三個按鈕的form表單，在創建FormList組件類時，通過this.props.children獲取FormList下的子元素，通過React.Children.map遍歷節點。通過React專用的調試工具，我們可以查看FormList組件類的具體組成如下：

對於React的入門還是比較容易的，但想深入掌握還有些路要走，要盡快熟悉JSX的語法規則，主要參考阮一峰大神的react入門實例教程和官方文檔。