“This is the 10th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

In React, communication between parent and child components is a common problem. In addition to using state management tools such as Redux, parent and child components can communicate with each other.

The parent component can communicate with the child component through props and prototype methods, and the child component can communicate with the parent component through callback functions and event bubbles.

1. Parent components communicate with child components

1. props

In the following code, name, as props, is passed from the parent component to the child component, which gets the name and renders it on the page.

The name parameter is passed from the parent to the child.

import { useState } from 'react';

const Son = ({ name }) = > {
    return <div>{name}</div>;
};

const Father = () = > {
    const [name, setName] = useState('Jack');
    return (
        <>
            <Son name={name} />
        </>
    );
};

export default Father;
Copy the code

2. Prototype approach

The parent component creates the Ref through react.createref (), which is stored on the instance property myRef. In the parent component, when rendering the child component, define a Ref property with the value of the newly created myRef.

The parent component calls the child component’s myFunc function, passing in an argument, which the child component receives and prints out.

Parameters are passed from parent to child, completing parent to child communication.

import React, { Component, Fragment } from 'react';

class Son extends Component {
    myFunc(name) {
        console.log(name);
    }
    render() {
        return <></>; }}/ / the parent component
export default class Father extends Component {
    constructor(props) {
        super(props);
        // Create a Ref and save it on the instance property myRef
        this.myRef = React.createRef();
    }

    componentDidMount() {
        // Call the function of the child component, passing an argument
        this.myRef.current.myFunc('Jack');
    }
    render() {
        return (
            <>
                <Son ref={this.myRef} />
            </>); }}Copy the code

2. Child components communicate with parent components

1. Callback function

As shown in the code below, the parent component displays the current count, but does not modify the value through the parent component itself. The parent component passes a function to the child, which is called when the child clicks the button, adding one to the count.

Within the child component, the value in the parent component is modified to complete the child component’s communication to the parent component.

import { useState } from 'react';

const Son = ({ setCount }) = > {
    return <button onClick={()= >SetCount (count => count +1)}> Click +1</button>;
};

const Father = () = > {
    const [count, setCount] = useState(0);
    return (
        <>
            <div>Count: {count}</div>
            <Son setCount={setCount} />
        </>
    );
};

export default Father;
Copy the code

2. Events bubble up

The following code, using the event bubbling mechanism, click the button of the child component, the event will bubble to the parent component, trigger the onClick function of the parent component, print Jack.

Click on the child component. The parent component performs the function and completes the child component’s communication with the parent component.

const Son = () = > {
    return <button>Click on the</button>;
};

const Father = () = > {
    const sayName = name= > {
        console.log(name);
    };
    return (
        <div onClick={()= > sayName('Jack')}>
            <Son />
        </div>
    );
};

export default Father;
Copy the code