1-8 basic use of props

props The basic use of

React I have uploaded the dependent package to the following address ：https://download.csdn.net/download/weixin_39162041/86264167

    <script type="text/babel">
        // Create components 
        class Person extends React.Component{
          
            render(){
                const {name,age,sex} = this.props
                return (
                    <ul>
                    <li> full name :{name}</li>
                    <li> Gender ：{age}</li>
                    <li> Age ：{sex}</li>
                    </ul>
                )
            }
        }
  	// Type tag properties . The limits of necessity .
        Person.defaultProps={	// If the value is not transmitted or is empty , Default values can be set 
            sex:' manly woman ',
            age:18
        }
        
        //  Type tag properties 、 The limits of necessity 
        // Premise ： Need to introduce <script type="text/javascript" src="./js/prop-types.js"></script>
        
        Person.propTypes = {// Be sure to pay attention to the case of keywords 
            name:PropTypes.string.isRequired, 	//name Must be of string type , Must pass 
            sex:PropTypes.string,//sex Must be of string type 
            age:PropTypes.number,//age Must be of numeric type 
            speak:PropTypes.func	// When setting the restriction property of function type , by func ( Particular attention ) .
            
        }
        ReactDOM.render(<Person name='tom' age='18' sex=' male ' speak='speak'/>,document.getElementById('test'))
        // If there are many data , You can use the expansion operator , combination babel and React When the grammar component of is worth passing , It can be used to expand an object , as follows ：
        ReactDOM.render(<Person {...data} />,document.getElementById('test'))

function speak(){

}
    </script>



//props Shorthand way 


    <script type="text/babel">
        // Create components 
        class Person extends React.Component{
          // Type tag properties . The limits of necessity .
        static defaultProps={
            sex:' manly woman ',
            age:18
        }
        static propTypes = {
            name:PropTypes.string.isRequired,
            sex:PropTypes.string,
        }
        state = {}
            render(){
                const {name,age,sex} = this.props
                return (
                    <ul>
                    <li> full name :{name}</li>
                    <li> Gender ：{age}</li>
                    <li> Age ：{sex}</li>
                    </ul>
                )
            }
            
        }

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