The introduction of

Similar to state, props provides data sources for components. However, state defines data by itself, while props accepts data from external components.

Directly on 🌰

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <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/babel.min.js"></script>
    
    <script type="text/babel">
        // 1. Create components
        class Person extends React.Component{
            render(){
                console.log(this)
                const {name,sex,age} = this.props
                return (
                    <ul>
                        <li>Name: {name}</li>
                        <li>Gender: {sex}</li>
                        <li>Age: {age}</li>
                    </ul>
                )
            }
        }
       
        ReactDOM.render(<Person name="jerry" sex="Male" age="20"/>.document.getElementById('test'))
    </script>
</body>
</html>
Copy the code

Batch transfer of multiple groups of tag attributes

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <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/babel.min.js"></script>
    
    <script type="text/babel">
        // 1. Create components
        class Person extends React.Component{
            render(){
                console.log(this)
                const {name,sex,age} = this.props
                return (
                    <ul>
                        <li>Name: {name}</li>
                        <li>Gender: {sex}</li>
                        <li>Age: {age}</li>
                    </ul>)}}const p = {name:'Lao Wang Tou'.sex:'male'.age:'76'}
        ReactDOM.render(<Person name="jerry" sex="Male" age="20"/>.document.getElementById('test'))
        // Pass multiple groups of tag attributes in batches
        ReactDOM.render(<Person {. p} / >.document.getElementById('test'))
    </script>
</body>
</html>
Copy the code

Restrict the format of incoming data

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <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/babel.min.js"></script>
    <script type="text/javascript" src=".. /js/prop-types.js"></script>
    
    <script type="text/babel">
        // 1. Create components
        class Person extends React.Component{
            render(){
                console.log(this)
                const {name,sex,age} = this.props
                // this.props. Name = 'jack' is an error because props is read-only
                return (
                    <ul>
                        <li>Name: {name}</li>
                        <li>Gender: {sex}</li>
                        <li>Age: {age}</li>
                    </ul>)}}// Requirement: restrict the data format of the object passed to props
        // Restrict the type and necessity of the tag attributes
        Person.propTypes = {
            name:PropTypes.string.isRequired, // String & Mandatory
            age:PropTypes.number, / / values
            sex:PropTypes.string, / / values
            speak:PropTypes.func  // restrict speak as a function
        }
        // Specify the default tag attribute values
        Person.defaultProps = {
            sex:'male'.age:1
        }

        ReactDOM.render(<Person name="jerry" sex="Male" age="20"/>.document.getElementById('test'))
        const p = {name:'Lao Wang Tou'.sex:'male'.age:'76'}
        // Pass multiple groups of tag attributes in batches
        ReactDOM.render(<Person {. p} / >.document.getElementById('test'))
    </script>
</body>
</html>
Copy the code

Reading the code, you can still see that propTypes and defaultProps are assigning to attributes in the Person instance, which can obviously be omitted by writing assignments directly in the Person classPerson.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <div id="test1"></div>
    <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/babel.min.js"></script>
    <script type="text/javascript" src=".. /js/prop-types.js"></script>
    
    <script type="text/babel">
        // 1. Create components
        class Person extends React.Component{
            // Requirement: restrict the data format of the object passed to props
            static propTypes = {
                name:PropTypes.string.isRequired, // String & Mandatory
                age:PropTypes.number, / / values
                sex:PropTypes.string, / / values
                speak:PropTypes.func  // restrict speak as a function
            }
            // Specify the default tag attribute values
            static defaultProps = {
                sex:'male'.age:1
            } 

            render(){
                console.log(this)
                const {name,sex,age} = this.props
                // this.props. Name = 'jack' is an error because props is read-only
                return (
                    <ul>
                        <li>Name: {name}</li>
                        <li>Gender: {sex}</li>
                        <li>Age: {age}</li>
                    </ul>
                )
            }
        }

        ReactDOM.render(<Person name={100} sex="Male" age="20"/>.document.getElementById('test'))
        const p = {name:'Lao Wang Tou'.sex:'male'.age:'76'}
        // Pass multiple groups of tag attributes in batches
        ReactDOM.render(<Person {. p} / >.document.getElementById('test1'))
    </script>
</body>
</html>
Copy the code

See the effect

Ah, wonderful knowledge