Props, the three major attributes of React

Original link; React complete notes

Props, the three major attributes of React

React components use props to communicate with each other. Each parent component can provide props to its child components, thereby passing some information to it. Props may remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions.

Props are information you pass to JSX tags. For example, className, src, alt, width and height are some examples of Props passed to :

When we render a component, we can pass some properties to the component. For example, I created a PersonComponent component and rendered the component to the interface:

class PersonComponent extends React.Component {

    render() {

    }
}

ReactDOM.render(<PersonComponent name='Tangerine' age={20}/>, document.getElementById("demo"))

At this time, we found through the React debugging tool that all the properties passed on the component label were converted to the three major properties of the component props.

So we can get name and age in the component by accessing this.props

Note: props are read-only and cannot be modified.

class PersonComponent extends React.Component {

    render() {
        const {name, age} = this.props
        return <p>My name is {name}, I am {age} years old this year</p>
    }
}

ReactDOM.render(<PersonComponent name='Tangerine' age='20'/>, document.getElementById("demo"))

Show results:

1) props syntax sugar

What if we pass too many properties on the component tag? We can use React syntactic sugar {...}

const p = {
    name: 'Tangerine',
    age: 20
}

ReactDOM.render(<PersonComponent {...p}/>, document.getElementById("demo"))

2) Limit props

a. Data type passed by props

Look at the code below, I want age + 1 to be output

class PersonComponent extends React.Component {

    render() {
        const {name, age} = this.props

        return <p>My name is {name}, I am {age + 1} years old this year</p>
    }
}

ReactDOM.render(<PersonComponent name="Tangerine" age="20"/>, document.getElementById("demo"))

The result is string splicing output, because age="20" passes the value through double quotes and returns a string type, so it is spliced. I want to pass numberTypes need to use React’s {}

Modify the code as follows: age={20}

ReactDOM.render(<PersonComponent name="Tangerine" age={20}/>, document.getElementById("demo"))

b. Limit the data types passed

After React 16.xxx, if you want to limit data types, you need to introduce the prop-types.js library

<!--Introducing the core library of React-->
<script type="text/javascript" src="./react-js/react.development.js"></script>
<!--Introducing the core library of React-DMO-->
<script type="text/javascript" src="./react-js/react-dom.development.js"></script>
<!--Introducing babel-->
<script type="text/javascript" src="./react-js/babel.min.js"></script>
<!--Limit props types-->
<script type="text/javascript" src="./react-js/prop-types.js"></script>

Among the four references above, the reference to react.development.js adds an object React globally and introduces react-dom.development.js There is one more object ReactDom in the world. By introducing prop-types.js, there is one more object PropTypes in the world, which is used to use props as types. limit.

If we want to impose type restrictions on the props of the component, we need to add the propTypes attribute to the component:

 class PersonComponent extends React.Component {
     ...omit render
 }

 // Specify type restrictions
 PersonComponent.propTypes = {
     name: PropTypes.string,
     age: PropTypes.number
 }

ReactDOM.render(<PersonComponent name="Tangerine" age="20"/>, document.getElementById("demo"))

The above code limits age to the number type, but what is passed is string, so an error will be reported:

c. Necessity restrictions

Same as the type restriction, you only need to add isRequired, so that when passing attributes, name cannot be missing, otherwise an error will be reported

 PersonComponent.propTypes = {
     name: PropTypes.string.isRequired,
     age: PropTypes.number
 }

d, props default value

If the props attribute is not passed, you can specify a default value for the attribute. You need to specify another dedfaultProps attribute in the component:

class PersonComponent extends React.Component {
    ...omit render
}

PersonComponent.propTypes = {
    name: PropTypes.string, // isRequired is not specified here
    age: PropTypes.number
}

//Add default value
PersonComponent.defaultProps = {
    name: 'Zhang San'
}

//The value of name is not passed here
ReactDOM.render(<PersonComponent age="20"/>, document.getElementById("demo"))

e. Limit transfer function types

The type of the function is func instead of function, that’s because function is a JS keyword

PersonComponent.propTypes = {
    speak: PropTypes.func
}

The following is a complete implementation example:

class PersonComponent extends React.Component {
    render() {
        const {name, age, speak} = this.props
        speak()
        return <p>My name is {name}, I am {age + 1} years old this year</p>
    }
}

PersonComponent.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    speak: PropTypes.func
}

PersonComponent.defaultProps = {
    name: 'Zhang San'
}

const p = {
    name: 'Tangerine',
    age: 22
}

function speak() {
    console.log(`My name is ${p.name}, I am ${p.age} this year`)
}

ReactDOM.render(<PersonComponent {...p} speak={speak}/>, document.getElementById("demo"))

3) Abbreviation of props

What we are doing PersonComponent.propTypes = {}The essence of this operation is to add properties to the class itself. Here we need to distinguish between adding properties to instances of the class. propTypes is added to the class. body, and the following operational properties will be added to the properties:

class PersonComponent extends React.Component {
    propTypes = {
        name: PropTypes.string,
        age: PropTypes.number,
        speak: PropTypes.func
    }
    ...
}

If we want to add attributes to the class, we need to use the static keyword to modify it:

class PersonComponent extends React.Component {

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number,
        speak: PropTypes.func
    }

    static defaultProps = {
        name: 'Zhang San'
    }

    render() {
        const {name, age, speak} = this.props
        speak()
        return <p>My name is {name}, I am {age + 1} years old this year</p>
    }
}

4) Props of function components

The three major components mentioned above are all based on class instances. Although functions cannot create instances, functions can receive parameters, so props can be operated in the function component, but the other two components cannot Achieved.

We can receive a props in the parameter of the function and then use it

function Person(props) {

    return (
        <h1>My name is {props.name} and I am {props.age} years old</h1>
    )
}

ReactDOM.render(<Person name={'Tangerine'} age={22}/>, document.getElementById("demo"))

Type restrictions for functional components

Type restrictions for functional components can only be written outside the component:

function Person(props) {

    return (
        <h1>My name is {props.name} and I am {props.age} years old</h1>
    )
}

Person.propTypes = {
    name: PropTypes.string
}
Person.defaultProps = {
    name: 'Zhang San'
}