React系列(一) - 脚手架创建项目
 React系列(二) - react基础知识
 React系列(三) - DOM操作
 React系列(四) - react生命周期

React组件中的数据流动是单向的，组件之间的通信，就是为了组件之间的数据传递或者当前组件调用另一个组件中的方法，本文适合小白扫盲。ps: 下面的不包括hooks写法，后面介绍

父组件向子组件通信
子组件向父组件通信
兄弟组件之间通信

父 -> 子组件通信

父组件传值 parent.js(父组件)

import React from 'react';
import Child from './child'; // 引入子组件

class Parent extends React.Component {

  render() {

        return (
            <div>
                {/* Child是子组件，name就是传递到子组件的属性 */}
                <Child name="hello, child"></Child>
            </div>
        )
    }
}

export default Parent;

child.js(子组件)
组件是类组件，通过 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;

child.js(子组件)
组件是函数组件，通过 props.xxx 获取父组件传递过来的值

function Child(props) {

  console.log(props) // {name: 'hello, child'}
  return (
    <div>{props.name}</div>
  )
}

export default Child;

父组件调用子组件方法(普通情况)

parent.js(父组件)

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

class Parent extends React.Component {

    testButton = () => {
        this.child.test() // 调用子组件test方法
    }

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

    render() {

        return (
            <div>
                <Child childMethod={this.childMethod} name="hello, child"></Child>
                <button onClick={this.testButton}>调用子组件方法</button>
            </div>
        )
    }
}

export default Parent;

child.js(类组件)

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('父组件调用这个方法')；
    }

    render() {
        return (
            <div>
                {this.props.name}
            </div>
        )
    }
}

export default Child;

子 -> 父组件通信

通过函数传值的方式，将子组件的值传递给父组件

在父组件中定义一个函数，用于处理传递过来的数据
子组件(类组件)通过this.props.xxx可以拿到该函数 parent.js

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

class Parent extends React.Component {


  handleMsg = (val) => {
    console.log(val) // 打印子组件传过来的值
  }
  render() {

    return (
      <div>
        <Child getMsg={this.handleMsg} name="hello, child"></Child>
      </div>
    )
  }
}

export default Parent;

child.js

import React from 'react';

class Child extends React.Component {

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

  handleClick = () => {
    this.props.getMsg('子组件的值'); // 调用
  }

  render() {

    return (
      <div>
        <button onClick={this.handleClick}>传值给父组件</button>
      </div>
    )
  }
}

export default Child;

兄弟组件通信

兄弟组件通信，主要讲一个组件的值传递给父组件，父组件再将值传递给另一个子组件。新建三个js文件，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) => {
        // child组件传过来的值
        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;

child.js

import React from 'react';

class Child extends React.Component {

    handleClick = () => {
        this.props.getMsg('child组件的值');
    }

    render() {

        return (
            <div>
                <button onClick={this.handleClick}>传值给父组件</button>
            </div>
        )
    }
}

export default Child;

child1.js

import React from 'react';

class Child1 extends React.Component {

    render() {
        return (
            <div>
                {this.props.name}
            </div>
        )
    }
}

export default Child1;

本文只是简单的介绍下，组件之间的通信，还有各种各样的第三方插件库提供支持。水平有限，后面会介绍的详细点

React系列(五) - 组件通信

父 -> 子组件通信

子 -> 父组件通信

兄弟组件通信