2. props

When we need to transfer external data to the component, we need to use the props attribute of the component instance.

Because state is internal to the component. You cannot use state to directly receive data only after the component is created, such as the data requested back.

Transfer label properties

The data passed to props is passed using the attributes in the render time tag.

ReactDOM. Render (< person name = "Xiao Ming" / >, document. Queryselector ("#con"));

be careful:

• The passed string must be enclosed in single or double quotation marks. Passing variables requires {} wrapping

• Transfer values, values, and objects need to be wrapped with {}

const name = 'Xiao Ming'
ReactDOM.render(<Person 
name={name}
age={14}
habit={[1, 2, 3, 4]}
obj={{ key1: 'value1', key2: 'value2' }}/>,document.querySelector("#con"));

Data receiving

Unlike state, props does not need to be created by itself. After the React instance comes out, the props attribute will be automatically added to the component instance. And add the tag attribute name as the key and the value as the value to the props object.

// Directly output this in the render of the component class props
// {name: "Xiao Ming", age: 14, habit: Array(4), obj: {...}}

Simple example of props

 <script type="text/babel">
    class Person extends React.Component {
      render() {
        return (
          <ul>
            <li>full name:{this.props.name}</li>
            <li>Age:{this.props.age}</li>
          </ul>
        );
      }
    }
    ReactDOM.render(<Person name="Xiao Ming" age={18} />, document.querySelector("#con"));
  </script>

propTypes and defaultProps

When using components, we may find that some data transfer types are different from the actual needs, or some data are not transferred, but the components need it. Then we may need a mechanism to remind us when we pass an error, and there is a default value when we don't pass it.

Therefore, React provides a proptype package. Dedicated to these needs.

Therefore, we need to introduce it. Note that it should also be introduced after the introduction of React core library.

<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js</script>

It may not be the latest version, but it is enough for learning at present

**propTypes **

Add a property on the class. Not on instances or prototypes. Therefore, you can use the static keyword.

You need to use the global PropTypes object provided by the proptype library

   class Person extends React.Component {
      render() {...}
      
      static propTypes = {
        // Tag attribute name: type and other restrictions
          
     	// Restriction type
        str: PropTypes.string,  // Limit to string, S is lowercase
        num : PropTypes.number,	// Limit to numeric, n is lowercase
        fun : PropTypes.func,   // Limit to function
        obj : PropTypes.object,  // Limit to object, o is lowercase
        boll: PropTypes.bool,  // Limit to Boolean
        arr : PropTypes.array  // Limit to array
        // The use of oneOfType is limited to one of several types
        oneof:PropTypes.oneOfType([
           PropType.string
           ...
          ])
       
        // Limited to data that must be transmitted
        requireStr = PropTypes.string.isRequired,   // Is limited to a string and must be passed in
        requireAny = PropTypes.any.isRequired    // Comparison data that is not empty
          
        // Other restrictions
        node: PropTypes.node // The number, strings, elements, or array of objects that can be rendered
      	isclass: PropTypes.instanceOf(ClassName),  // Is it an instance of some kind
        onValue: PropTypes.oneOf(['v1', 'v2']),   // Can only be one of these values
        
      }
    }

defaultProps

Used to give default values

static defaultProps = {
    sex: 'male'   // Set the sex property to male If the tag does not pass in sex, the default value is used
  }

Function using props

The current version of the React function does not have a state.

However, you can use the function of props. Because functions can pass arguments.

Let's briefly talk about the process

• The method of passing data is still to use label attributes. That is, the method of passing props data is the same as that of props of class
• Receive data inside the function through parameters or arguments
• When you need to pass the default value of a type or array, you need to pass the function name outside the function propTypes / function name defaultProps adds corresponding functions. The internal writing method is the same as that in the class