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入门实例教程和官方文档。