React props 初篇 ———— 如何props传值、设置传值类型、设置传值默认值

React props 初篇 ———— 如何props传值、设置传值类型、设置传值默认值

    <!-- react核心库 -->
    <script src="../../../js//react.development.js"></script>

    <!-- deact-dom. 用于支持react操作dom -->
    <script src="../../../js/react-dom.development.js"></script>

    <!-- babel ，用于将jsx转换为js -->
    <script src="../../../js//babel.min.js"></script>

    <!-- 引入props依赖包 -->
    <script src="../../../js/prop-types.js"></script>

    <div id="test"></div>
    <div id="test2"></div>
    
    <script type="text/babel">

        /*
            总结：
                1.如何使用props进行传值？  需要在标签上进行键值对的编写  
                    如：<Person name="小明" age={20}/>
                    使用的时候我们console.log(this.props) 就可以看见了

                2.使用props进行限定（类型限定、默认值限定） 需要引入相关依赖包<script src="../../../js/prop-types.js"/>
                    
                    2.1类型限定规则：
                        对象名称.propsTypes = {
                                    ↑
                                一定注意：他俩是不一样的，一个首字母小写，一个大写！！！
                                    ↓
                            name:PropsTypes.string.isRequired name为字符串类型，并且他是必传项（isRequired代表必填）

                            age:PropsTypes.number,   age为数字类型，不是必填项

                            speck:PropsTypes.func    speck()是一个方法，但是不可以写成function，因为他是关键字

                        }

                    2.2默认值限定：

                        对象名称.defaultProps = {

                            age:13,  age 传默认显示 13

                        }
        */

        class Person extends React.Component{

            render(){

                const {name,age,sex,speck} = this.props

                return (

                    <ul>
                        <li onClick={speck}>姓名：{name}</li>    
                        <li>年龄：{sex}</li>    
                        <li>性别：{age}</li>    
                    </ul>

                )

            }

            
        } 
        
        // 类型限定
        Person.propTypes = {

            // 类型限定为字符串类型，并且必传
            name:PropTypes.string.isRequired,

            // 类型为数字类型
            age:PropTypes.number,
            sex:PropTypes.string,

        }

        // 设置默认值
        Person.defaultProps = {
            age:1,
            sex:'没有性别'
        }

        function speck(){

            console.log('我会说话')

        }

        ReactDOM.render(<Person name="小明" age={20} speck={speck}/>,document.getElementById("test"))
        ReactDOM.render(<Person name={12}/>,document.getElementById("test2"))

    </script>