在 React.js 中，數(shù)據(jù)是從上自下流動（傳遞）的，也就是一個父組件可以把它的 state / props 通過 props 傳遞給它的子組件，但是子組件不能修改 props - React.js 是單向數(shù)據(jù)流，如果子組件需要修改父組件狀態(tài)（數(shù)據(jù)），是通過回調(diào)函數(shù)方式來完成的。

1.父級向子級通信

把數(shù)據(jù)添加子組件的屬性中，然后子組件中從props屬性中，獲取父級傳遞過來的數(shù)據(jù)。

2.子級向父級通信

在父級中定義相關(guān)的數(shù)據(jù)操作方法(或其他回調(diào)), 把該方法傳遞給子級，在子級中調(diào)用該方法父級傳遞消息。

3.跨組件通信

1.創(chuàng)建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.在父組件調(diào)用 Provider 傳遞數(shù)據(jù)

Context.Provider，使用value傳遞數(shù)據(jù)

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.接收數(shù)據(jù)
方法一：使用類屬性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，從參數(shù)中獲取

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

注意：在使用不熟練時，最好不要在項(xiàng)目中使用 context，context一般給第三方庫使用