有了props属性，可以动态的向React组件传递信息, 同时可以对标签属性的类型及默认值进行限制

 <!-- 准备好一个容器 -->
    <div id="test"></div>
    <div id="test2"></div>

    <!-- 引入核心库  React对象 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom， 用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel, 用于将jxs转为js -->
    <script src="../js/babel.min.js"></script>
    <!-- 引入prop-types, 用于对组件的标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>
    <script type="text/babel">
        //1. 创建类式组件
        class Person extends React.Component{
            //props = {name:"",sex:"先生",age:0}
            state = {isHot:true}
            //props是只读的
            render(){
                console.log(this);
                const {name,sex,age} = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age+1}</li>
                    </ul>
                )
            }
            static propTypes = {
                name:PropTypes.string.isRequired,
                sex: PropTypes.string,
                age: PropTypes.number
            }
            static defaultProps = {
                sex:"不男不女"
            }
        }
        //有了props属性，可以动态的传递信息
       // ReactDOM.render(<Person name="小强" sex="男" age="18"/>,document.getElementById("test"))
        const p = {name:"yy",sex:"男",age:16}
        //上面写法的语法糖(适合单条信息)
        ReactDOM.render(<Person {...p}/>,document.getElementById("test"))
        ReactDOM.render(<Person name="小小" age={10}/>,document.getElementById("test2"))
                             // {} 这里的{}表示里面要写JS表达式, 
                             // babel + react 让这里的 ...p 可以展开， 并非复制一个对象
                             // 原生这样写是不行的，但在这里通过babel+react让它可以展开, 仅仅适用于标签属性
         //------------------------------------------------------------------------------------------------
          // 函数式组件： 只能使用props属性
        function Person(props){
            return (
                    <ul>
                        <li>姓名：{props.name}</li>
                        <li>性别：{props.sex}</li>
                        <li>年龄：{props.age+1}</li>
                    </ul>
                )
        }
        Person.propTypes = {
                name:PropTypes.string.isRequired,
                sex: PropTypes.string,
                age: PropTypes.number
            }
        Person.defaultProps = {
                sex:"不男不女"
            }
        const p = {name:"yy",sex:"男",age:16}
        ReactDOM.render(<Person {...p}/>,document.getElementById("test"))
                       
    </script>