在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

1.父级向子级通信

把数据添加子组件的属性中，然后子组件中从props属性中，获取父级传递过来的数据。

2.子级向父级通信

在父级中定义相关的数据操作方法(或其他回调), 把该方法传递给子级，在子级中调用该方法父级传递消息。

3.跨组件通信

1.创建context对象

React.createContext(defaultValue);
{ Consumer, Provider } = createContext(defaultValue)

context.js

import {createContext} from "react";

const context = createContext();
const {Provider,Consumer} = context;

export {Provider,Consumer}
export default context;

2.在父组件调用 Provider 传递数据

Context.Provider，使用value传递数据

import { Component } from "react";
import Contatiner from "./container";
import context,{Provider} from "./context";
class App extends Component {
  render() {
    const {showName,nub} = this.state;
    return <div>
        <Provider
          value={{
            showName,nub
          }}
        >
          <Contatiner />
        </Provider>
    </div>
  }
}
export default App;

3.接收数据
方法一：使用类属性contextType

class.contextType = Context;
static contextType = Context;
从this.context中获取;

import { Component } from "react";
import context from "./context";
class Name extends Component {
  static contextType = context;
  render(){
    const {showName} = this.context;
    return <>
        <p>{showName}</p>
    </>
  }
}

export default Name;

方法二：使用Consumer

Context.Consumer，从参数中获取

import { Component } from "react";
import {Consumer} from "./context";
export default class Nub extends Component {
  render(){
    return <Consumer>
        {({nub})=>{
          return <p>{nub}</p>
        }}
      </Consumer>
  }
}

注意：在使用不熟练时，最好不要在项目中使用 context，context一般给第三方库使用