有了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>