1-8 props的基础使用

props的基础使用

React依赖包我已上传地址如下：https://download.csdn.net/download/weixin_39162041/86264167

    <script type="text/babel">
        //创建组件
        class Person extends React.Component{
          
            render(){
                const {name,age,sex} = this.props
                return (
                    <ul>
                    <li>姓名:{name}</li>
                    <li>性别：{age}</li>
                    <li>年龄：{sex}</li>
                    </ul>
                )
            }
        }
  	//对标签属性进行类型。必要性的限制。
        Person.defaultProps={	//如果值不传或者为空的时候，可以设置默认值
            sex:'不男不女'，
            age:18
        }
        
        // 对标签属性进行类型、必要性的限制
        //前提：需要引入<script type="text/javascript" src="./js/prop-types.js"></script>
        
        Person.propTypes = {//一定注意关键字的大小写
            name:PropTypes.string.isRequired, 	//name必须为字符串类型，必须传
            sex:PropTypes.string,//sex必须为字符串类型
            age:PropTypes.number,//age必须为数字类型
            speak:PropTypes.func	//函数类型设置限制属性时，为func (特别注意) .
            
        }
        ReactDOM.render(<Person name='tom' age='18' sex='男' speak='speak'/>,document.getElementById('test'))
        //如果数据多的情况下，可以使用展开运算符，结合babel和React的语法组件传值得时候，可以用来展开一个对象，如下：
        ReactDOM.render(<Person {...data} />,document.getElementById('test'))

function speak(){

}
    </script>



//props简写方式


    <script type="text/babel">
        //创建组件
        class Person extends React.Component{
          //对标签属性进行类型。必要性的限制。
        static defaultProps={
            sex:'不男不女',
            age:18
        }
        static propTypes = {
            name:PropTypes.string.isRequired,
            sex:PropTypes.string,
        }
        state = {}
            render(){
                const {name,age,sex} = this.props
                return (
                    <ul>
                    <li>姓名:{name}</li>
                    <li>性别：{age}</li>
                    <li>年龄：{sex}</li>
                    </ul>
                )
            }
            
        }

        ReactDOM.render(<Person name='tom' age='18' sex='男'/>,document.getElementById('test'))
    </script>