React技术栈-组件三大属性之props

　　　　　　　　　　　　　　React技术栈-组件三大属性之props

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.组件的props属性概述

　　每个组件对象都会有props(properties的简写)属性

　　组件标签的所有属性都保存在props中

　　通过标签属性从组件外向组件内传递变化的数据(注意: 组件内部不要修改props数据)

二.props实战案例

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组件三大属性之props</title>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
        <div id="box5"></div>
    </body>
    
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <script type="text/babel">
        
        //1.1>.组件定义方式一:使用工厂函数定义组件
        function Person(props){
            return (
                <ul>
                    <li>姓名:{props.name}</li>
                    <li>年龄:{props.age}</li>
                    <li>性别:{props.sex}</li>
                </ul>    
            )
        }
        
        //指定组件默认属性值
        Person.defaultProps = {
            sex : '女',
            age :20
        }
        
        //对props中的属性值进行类型限制和必要性限制,要求name数据类型为string，age的数据类型为int.
        Person.propTypes = {
            name:PropTypes.string.isRequired,
            age:PropTypes.number
        }

        //1.2>.组件定义方式二:ES6类组件
        class Person2 extends React.Component{
            render(){
                console.log(this);
                return(
                    <ul>
                        <li>姓名:{this.props.name}</li>
                        <li>年龄:{this.props.age}</li>
                        <li>性别:{this.props.sex}</li>
                    </ul>
                )
            }
        }        
        
        //2>.渲染组件标签
        const p1 = {
            name:"Jason",
            age:18,
            sex:'男'
        }
        ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById("box1"))
        
        const p2 = {
            name:"G.E.M",
        }
        //不传递所有属性值,只传递个别属性，其余属性则会使用默认值
        ReactDOM.render(<Person name={p2.name} />,document.getElementById("box2"))
        
        const p3 = {
            name:"Jay",
            age:41,
            sex:'男'
        }
        //通过可变参数传参"{...p3}"
        ReactDOM.render(<Person {...p3} />,document.getElementById("box3"))
        
        const p5 = {
            name:"尹正杰",
            age:18,
            sex:'男'
        }
        //使用ES6的类组件
        ReactDOM.render(<Person2 {...p5}/>,document.getElementById("box5"))
    </script>
</html>

2>.浏览器打开以上代码渲染结果

三.请区别一下组件的props和state属性

　　state: 
　　　　组件自身内部可变化的数据

　　props: 
　　　　从组件外部向组件内部传递数据, 组件内部只读不修改