react中兄弟组件之间传值

兄弟组件传值使用PubSub，所以先安装npm i --save pubsub-js

组件Son向兄弟组件Brother传值num

1.Son组件定义一个方法，使用PubSub.publish("methodName", data)进行发送值

import React, { Component } from "react";
import PubSub from "pubsub-js";
export default class Son extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 111,
    };
  }
  pubsub() {
    //PubSub.publish向外定义方法名 第一个参数是方法名，第二个参数是传递的数据
    PubSub.publish("methodName", this.state.num);
  }
  render() {
    return (
      <div>
        <button onClick={this.pubsub.bind(this)}>点我向兄弟组件发送数据</button>
      </div>
    );
  }
}

2.Brother组件中使用 PubSub.subscribe("methodName", (msg, data) => {}）来接收数据

import React, { Component } from "react";
import PubSub from "pubsub-js";
export default class Brother extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataBro: "兄弟组件的默认值"
    };
    // 使用PubSub.subscribe接收数据（第一个参数是方法名，）
    PubSub.subscribe("methodName", (msg, data) => {
      console.log("phone" + data);
      this.setState({ dataBro: data });
    });
  }
  render() {
    return <div>{this.state.dataBro}</div>;
  }
}

注意：两个兄弟组件都别忘了导入import PubSub from "pubsub-js";