The main difference between state and props is that props is immutable, and state can be changed according to the interaction with users.

Set the default value for props through the defaultProps property of the component class

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

class Name extends React.Component{
  render(){
    return(
      <div>{this.props.name}</div>
    )
  }
}

Name.defaultProps={
  name:'cyy'
}

  ReactDOM.render(
    <div>
      <Name/>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

How to combine state and props in an application:
You can set state in the parent component and pass it to the child component through props

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// Parent component passed state Setting data
class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state={
      name:'cyy'
    }
  }

  render(){
    return(
      <Child name={this.state.name}/>
    )
  }
}

// Sub components pass props Receiving parameters
class Child extends React.Component{
  render(){
    return(
      <div>{this.props.name}</div>
    )
  }
} 

  ReactDOM.render(
    <div>
      <Parent/>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

Props verification
React.prop types has been moved to the prop types library after React v15.5.
First, introduce React.PropTypes

Then set up validation

Further verifier descriptions are as follows

MyComponent.propTypes = {
    // May declare prop Designated JS Basic data type. By default, these data are optional
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // Objects that can be rendered numbers, strings, elements or array
    optionalNode: React.PropTypes.node,
 
    //  React element
    optionalElement: React.PropTypes.element,
 
    // use JS Of instanceof operator declaration  prop Is an instance of the class.
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // use enum To restrict prop Only the specified value is accepted.
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // Can be one of multiple object types
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // Array of specified types
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // Specifies the object of the type's properties
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // given shape Object of parameter
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // Any type plus `isRequired` To make prop Not to be empty.
    requiredFunc: React.PropTypes.func.isRequired,
 
    // Any type that cannot be empty
    requiredAny: React.PropTypes.any.isRequired,
 
    // Custom validators. If the validation fails, you need to return a Error Object. Do not use directly `console.warn` Or throw exceptions, because `oneOfType` It will fail.
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  }
}

In many cases, the child control needs all props parameters of the parent control. At this time, it will be very troublesome for us to write one parameter by one, for example:
<Name name={this.props.name} url={this.props.url} .../>

So how do we assign the parent property directly to the props parameter of the child component? It can be written as follows:
<Name props={this.props}/>