React入門介紹（2）- 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>

1. 如上例中調用<InputWithButton/>標籤時，添加的name和value屬性,在創建組件類時，可以通過this.props對象是獲取組件的屬性,在input通過this.props.value給value賦值，在button中通過this.props.name賦值，注意都要包裹在{}內。

2. 添加屬性時需要注意添加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入門實例教程和官方文檔。

原文鏈接:http://www.cnblogs.com/Nancy-wang/p/6995211.html