react入门----组件的基础用法

1、组件

<!-- React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类 -->
        var HelloMessage = React.createClass({
          render: function() {
            return <h1>Hello {this.props.name}</h1>
          }
        })
    <!-- 变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。 -->
        ReactDOM.render(
          <HelloMessage name="John" />,
          document.getElementById('example')
        )

2、组件要注意的两个规则（a.组件名的第一个字母，必须大写，否则会报错，b.组件类只能包含一个顶层标签，否则也会报错）

var HelloMessage = React.createClass({
          render: function() {
            return <h1>
              Hello {this.props.name}
            </h1><p>
              some text
            </p>
          }
        })
        <!-- 上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。 -->
        <!-- 组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，
　　　　就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。 -->

 3.this.props.children的使用和注意事项

　　a.this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

　　b.React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法。

var NyComponent = React.createClass({
            render: function () {
                return(
                    <ol>
                        <!-- this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点  -->
                            React.Children.map(this.props.children, function(child) {
                                return <li>{child}</li>
                            })
                        }
                    </ol>)
            }
        })
        <!-- 上面代码的 NyComponent 组件有两个 span 子节点，它们都可以通过 this.props.children 读取 -->
        <!-- 这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。 -->
        <!-- React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法， -->
        ReactDOM.render(
            <NyComponent>
                <span>hello</span>
                <span>world</span>
            </NyComponent>,
            document.getElementById('container')
        )

4.PropTypes

　　a.组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

　　b.组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求

<!-- 组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。 -->
        <!-- /组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求 -->
        var MyTestComponent = React.createClass({
            propTypes: function () {
                title: React.PropTypes.string.isRequired
            },
            render: function () {
                return <h1> {this.props.title} </h1>
            }
        })
        <!-- 上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。 -->
        <!-- 这样一来，title属性就通不过验证了。控制台会显示一行错误信息。 -->
        var data = 123
        ReactDOM.render(<MyTestComponent title={data}/>,document.getElementById('container'))
        <!-- 此外，getDefaultProps 方法可以用来设置组件属性的默认值。 -->
        var MyTitle = React.createClass({
          getDefaultProps : function () {
            return {
              title : 'Hello World'
            };
          },

          render: function() {
             return <h1> {this.props.title} </h1>;
           }
        });

        ReactDOM.render(
          <MyTitle />,
          document.body
        );