React series (1) – Scaffolding creation project React series (2) – React Basics React series (3) – DOM manipulation React series (4) – React lifecycle

The React component’s data flow is one-way. The communication between components is for data transfer between components or for the current component to invoke methods in another component. Ps: the following does not include hooks

• The parent component communicates with the child component
• The child component communicates with the parent component
• Communication between sibling components

Parent -> Child component communication

• The parent component passes values

Parent-js (parent component)

import React from 'react';
import Child from './child'; // Introduce child components

class Parent extends React.Component {

  render() {

        return (
            <div>{/* Child is the Child component, name is the property passed to the Child component */}<Child name="hello, child"></Child>
            </div>)}}export default Parent;
Copy the code

The child.js component is a class component that gets the value passed by the parent through this.props. XXX

import React from 'react';

class Child extends React.Component {

  constructor(props) {
    super(props)

    console.log(this.props) // {name: 'hello, child'}
  }
  render() {

    return (
      <div>{this.props.name}</div>)}}export default Child;
Copy the code

The child.js component is a function component that gets the value passed by the parent component via props. XXX

function Child(props) {

  console.log(props) // {name: 'hello, child'}
  return (
    <div>{props.name}</div>)}export default Child;
Copy the code

• Parent component calls child component methods (common case)

Parent-js (parent component)

import React from 'react';
import Child from './child'

class Parent extends React.Component {

    testButton = () = > {
        this.child.test() // Call the child component test method
    }

    childMethod = (ref) = > {
        this.child = ref
    }

    render() {

        return (
            <div>
                <Child childMethod={this.childMethod} name="hello, child"></Child>
                <button onClick={this.testButton}>Invoke child component methods</button>
            </div>)}}export default Parent;

Copy the code

Child.js (class component)

import React from 'react';

class Child extends React.Component {

    constructor(props) {
        super(props);console.log(this. Props); }componentDidMount() {
        this.props.childMethod(this)；
    }

    test() {
        console.log('Parent component calls this method')；
    }

    render() {
        return (
            <div>
                {this.props.name}
            </div>)}}export default Child;
Copy the code

Child -> Parent component communication

The value of the child component is passed to the parent component by function passing

1. Define a function in the parent component that processes the passed data
2. The child component (class component) gets this function through this.props. XXX

parent.js

import React from 'react';
import Child from './child'

class Parent extends React.Component {


  handleMsg = (val) = > {
    console.log(val) // Print the value passed by the child component
  }
  render() {

    return (
      <div>
        <Child getMsg={this.handleMsg} name="hello, child"></Child>
      </div>)}}export default Parent;
Copy the code

child.js

import React from 'react';

class Child extends React.Component {

  constructor(props) {
    super(props);
    console.log(props);
  }

  handleClick = () = > {
    this.props.getMsg('Value of child component'); / / call
  }

  render() {

    return (
      <div>
        <button onClick={this.handleClick}>Pass the value to the parent component</button>
      </div>)}}export default Child;
Copy the code

Sibling communication

Sibling component communication is about passing the value of one component to its parent, which then passes the value to another child component. Create three new js files: parent. Js, child. Js, child1.js

parent.js

import React from 'react';
import Child from './child';
import Child1 from './child1';

class Parent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            msg: ' '
        }
    }
    
    handleMsg = (val) = > {
        // The value passed by the child component
        this.setState({
            msg: val
        })
    }
    
    render() {

        return (
            <div>
                <Child getMsg={this.handleMsg} name="hello, child"></Child>
                <Child1 name={this.state.msg}></Child1>
            </div>)}}export default Parent;
Copy the code

child.js

import React from 'react';

class Child extends React.Component {

    handleClick = () = > {
        this.props.getMsg('Value of child component');
    }

    render() {

        return (
            <div>
                <button onClick={this.handleClick}>Pass the value to the parent component</button>
            </div>)}}export default Child;
Copy the code

child1.js

import React from 'react';

class Child1 extends React.Component {

    render() {
        return (
            <div>
                {this.props.name}
            </div>)}}export default Child1;
Copy the code

This article has only briefly covered communication between components, supported by a variety of third-party plug-in libraries. The level is limited, more on that later