React 小知识 - 兄弟组件传值

创建两个兄弟组件，A & B
UI样式用的 bootstrap
安装 pubsub-js
注意代码中 注释有 ddd 标记

// yarn add pubsub-js
// 基本用法展示
import PubSub from "pubsub-js"

PubSub.publish("消息名msg",传递的值); // 发布消息
let token = PubSub.subscribe("消息名msg",(消息名msg,传递的值) => {}); // 订阅消息
PubSub.unsubscribe(token); // 取消订阅消息

// A组件
import React, { Component } from 'react'
import PubSub from "pubsub-js"

export default class A extends Component {

    state = {
        value:""
    }

    getValue = (event)=>{
        this.setState({
            value:event.target.value
        })
    }

    handleSearch = () => {
        console.log("发布消息");
        PubSub.publish("myPubSub",this.state.value); // ddd 发布消息
    }

    render() {
        return (
            <div className="search">
                <div className="block-msg">A组件</div>
                <div>
                    <input className="form-control" type="text" placeholder="请输入需要搜索的关键字" onChange={this.getValue}/>
                    <br />
                    <button className="btn btn-info" onClick={this.handleSearch}>发布消息</button>
                </div>
            </div>
        )
    }
}

// B组件
import React, { Component } from 'react'
import PubSub from "pubsub-js"

export default class B extends Component {

    state = {
        msg : "尚未获取"
    }

    componentDidMount(){
        console.log("B组件已挂载");
        this.token = PubSub.subscribe("myPubSub",(_,data)=>{ // ddd 订阅消息 (下划线 参数占位符)
            this.setState({msg:data})
        })
    }

    componentWillUnmount(){
        PubSub.unsubscribe(this.token); // ddd 取消订阅消息
    }

    getPubSubMsg = () => {
        PubSub.subscribe("myPubSub",(_,data)=>{ // ddd 订阅消息，这里用于一个我的错误示范
            console.log(data);
        })
    }

    render() {
        return (
            <div className="list">
                <div className="block-msg">A组件获取的值是：{this.state.msg}</div>
                <button className="btn btn-info" onClick={this.getPubSubMsg}>获取订阅消息</button>
            </div>
        )
    }
}

效果图

在A组件中输入点内容，点击发布消息按钮

接下来展示我的错误用法，点击获取订阅消息 3 次，再点击发布消息

按照自己的理解，点了几下 获取订阅消息 按钮，就订阅几下消息，所以控制台也会打印几次
以上内容，都是自己学习网上教学视频总结，有问题希望不要问我，我也不会