react 发布订阅插件pubsub-解决组件间传递数据

解决组件间数据传递(兄弟、子父和多层都可以使用)
当触发发布,就会触发订阅

1、安装npm install pubsub-js

2、发布消息:
	import PubSub from 'pubsub-js';

	PubSub.publish('发布名称',数据);

3、订阅消息:
	import PubSub from 'pubsub-js';
	
	PubSub.subscribe('订阅发布的名称',function(msg,searchName){
	 		msg:订阅的名称
	 		searchName:发布的数据
	 		注意this的指向,箭头函数可忽略
	 }

代码示例:
发布

import React,{Component} from 'react';
import PropTypes from 'prop-types';
import PubSub from 'pubsub-js';

export default class App extends Component{
    state={
        uname:''
    }

    render()
    {
        const {uname,content}=this.state
        return(
            <div>
            <div>
                <p>
                    用户名
                </p>
                <input value={uname} onChange={this.change}/>
            </div>
            <div>   
                <button onClick={this.submit}>提交</button>
            </div>
            
            
        </div> 
        )

    }
    submit=()=>{

        //发布消息
        PubSub.publish('search',this.state.uname);
    }
    change=(e)=>{
        let {uname} =this.state;
        uname=e.target.value;
        this.setState({
            uname:uname
        })

    }

}

订阅:

import React,{Component} from 'react';
import PropTypes from 'prop-types';
import './index.css'; 
import PubSub from 'pubsub-js';

export default class App extends Component{
    state={
        loading:false,
        users:''
    }
    componentDidMount()
    {
        //订阅消息
        const that=this;
        PubSub.subscribe('search',function(msg,searchName){
                console.log(searchName);
                that.setState({
                    loading:true
                })

                setTimeout(()=>{
                    that.setState({
                        loading:false,
                        users:[{url:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg','name':'jeff'},{url:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',name:'jeff2'}]
                    })
                },2000)
        })
    }

    render(){
        const {loading,users} =this.state;

        if(loading)
        {
            return(
                <h2>loading中</h2>
            )
        } else if(users){
            return(
                <div>
                    {
                        users.map(function(item,index){
                            return (
                              <div key={index}>
                                <img src={item.url} alt=""/>
                                <p>{item.name}</p>
                              </div>
                            )
                        })
                    }

                </div>
            )
        }else{
        return (<h2>请搜索</h2>)
        }
    }


}