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

╰半夏微凉° 2021-07-24 16:10 674阅读 0赞

解决组件间数据传递(兄弟、子父和多层都可以使用)
    当触发发布,就会触发订阅
    
    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>)
            }
        }
    
    
    }