1. The parent component passes values to the child component (that is, the child component calls the parent component data and methods)

1. Define an attribute <Header msg='Home Page'> </Header> when calling subcomponents

2. Get through this.props.msg in the subcomponent.   

Explanation: The parent component can not only pass values to the child component, but also methods to the child component and the whole parent component to the child component.

 

2. Value transfer from child component to parent component

1. When calling a subcomponent, define an attribute <Header father={this}> </Header> or pass the getSonData method in the past, as described in the following code.

2. The method in the parent component is invoked through this.props.father.getSonData.bind(this,'I'm from the child component') to set the passed value.

3. In the parent component, the passed value is obtained by getSonData = (result) => {alert (result);}.

Description: The essence of the value passed by the child component to the parent component is that the child component calls the parent component's parametric method and receives the value through the parametric function in the parent component.

 

3. Parent component calls child component data and methods:

1. When calling a subcomponent, specify the value of ref <Header ref='header'> </Header>.

2. Get the whole child component instance through this.refs.header in the parent component.

 

4. defaultProps and propTypes

DefaultProps: If the parent component does not pass values to the child component when it calls the child component, the default value defined by defaultProps is used in the child component.

2. propTypes: Verify the validity of the parent component's value-passing type. ProTypes need to introduce import Proptypes from'prop-types';

Note: Both are defined in subcomponents.

 

 

The following examples are used for reference to fully understand the value transfer of parent and child components. Father.js is the parent component and Header.js is the child component. The code is as follows:

Father.js:

import React from 'react';
import Header from './Header';
class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: 'hello qing',
            num: 123//If num is a string, the console will report an error because the subcomponent has Header.propTypes set
        };
    }
    run = () => {
        alert('I am the parent component run Method');
    }
    getDate = () => {
        alert(this.state.title);
    }
    //Get data from subcomponents
    getSonData = (result) => {
        alert(result);
    }
    //Data and methods of parent component invoking child component
    getSonRun = () => {
        // alert(this.refs.footer.state.sonmsg);
        this.refs.footer.run();
    }
    render() {
        return (
            // The parent component can pass values, methods, and the entire parent component to the child component.
            <div><Header title="haha" run={this.run} father={this} ref='footer' num={this.state.num} getSonData={this.getSonData}>header Middle Text Correspondence props.children</Header>
                <hr />I am the parent component content
                <br />
                <button onClick={this.getSonRun}>Get the entire subcomponent</button>
            </div>
        );
    }
}

export default Father;

Header.js:

import React from 'react';
import Proptypes from 'prop-types';
class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            sonmsg:'header----sonmsg'
         };
    }
    getFathMsg=()=>{
        alert(this.props.father.state.title);
    }
    run=()=>{
        alert('I am a subcomponent run Method');
    }
    render() {
        return (
            <div>
                <h1>{this.props.children}</h1>
                <h2>{this.props.title}---I am a subcomponent content</h2>
                <button onClick={this.props.run}>Calling the parent component run Method</button>
                <button onClick={this.props.father.getDate}>Calling the parent component getDate Method</button>
                <button onClick={this.getFathMsg}>Get the parent component state Medium title attribute</button>
                <button onClick={this.props.father.getSonData.bind(this,'I'm from a subcomponent.')}>Subcomponents pass values to parent components</button>
                <button onClick={this.props.getSonData.bind(this,'I'm 222 from subcomponents')}>Subcomponents pass value 2 to parent components</button>
            </div>
        );
    }
}

//DefaultProps: If the parent component does not pass title attributes to the child component when it calls the child component, the default value defined by defaultProps is used in the child component.
Header.defaultProps={
    title:'Title'
}
// ProTypes: Verify the validity of the parent component's value-passing type. The Proptypes name in Proptypes.number can be defined by itself, consistent with the name introduced above.
Header.propTypes={
    num:Proptypes.number
}
export default Header;