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>

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入門實例教程和官方文檔。