How to use and limit props in react

 <div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- Import react core library -->
  <script src="../js/react.development.js"></script>
  <!-- Introduce react-dom to support react to operate dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- Introduce babel to convert jsx to js -->
  <script src="../js/babel.min.js"></script>
  <script type='text/babel'>
  // Create component class Person extends React.Component{
    render() {
      console.log(this);
      const{name,age,sex} = this.props
      return(
        <ul>
          <li>Name: {name}</li>
          <li>Gender: {sex}</li>
          <li>Age: {age+1}</li>
        </ul>
      )
    }
  }
  // Render components to the page ReactDOM.render(<Person name="jerry" age={19} sex="男" />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))

  const p = {name:'老刘',age:18,sex:'女'}
  // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </script>

<div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- Import react core library -->
  <script src="../js/react.development.js"></script>
  <!-- Introduce react-dom to support react to operate dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- Introduce babel to convert jsx to js -->
  <script src="../js/babel.min.js"></script>
  <!-- Introduce prop-types, which is used to restrict component tag attributes. After the introduction, there is one more object PropTypes in the world -->
  <script src="../js/prop-types.js"></script>

  <script type='text/babel'>
  // Create component class Person extends React.Component{
    render() {
      console.log(this);
      const{name,age,sex} = this.props
      return(
        <ul>
          <li>Name: {name}</li>
          <li>Gender: {sex}</li>
          <li>Age: {age+1}</li>
        </ul>
      )
    }
  }
  // Restriction rules Person.propTypes = {
    // Restrict name content to a string isRequired means that the content is required and cannot be omitted name:PropTypes.string.isRequired,
    // Limit sex to string sex: PropTypes.string,
    // Limit age to numeric value age: PropTypes.number,
    // Limit speak to the function speak: PropTypes.func
  }
  Person.defaultProps = {
    sex:'male', // sex default value is male age:18,
    speak: function() {
        return [1];
    }
  }
  // Render components to the page ReactDOM.render(<Person name="jerry" age={19} />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))

  const p = {name:'老刘',age:18,sex:'女'}
  // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </script>

Vue.component('my-component', {
  props: {
    // Basic type checking (`null` and `undefined` will pass any type validation)
    propA: Number,
    // Multiple possible types propB: [String, Number],
    // Required string propC: {
      type: String,
      required: true
    },
    // Numeric propD with default value: {
      type: Number,
      default: 100
    },
    // Object propE with default values: {
      type: Object,
      // Object or array default values ​​must be obtained from a factory function default: function () {
        return { message: 'hello' }
      }
    },
    // Custom verification function propF: {
      validator: function (value) {
        // This value must match one of the following strings return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

String
Number
Boolean
Array
Object
Date
Function
Symbol

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

Vue.component('blog-post', {
  props: {
    author: Person
  }
})