采取一个插件

pubsub-js

安装

npm i pubsub-js

使用过程

import React from 'react'
import Search from './components/Search'
import List from './components/List'
export default class App extends React.Component {
  render() {
    return (
      

        
        
      
    )
  }
}

export default class List extends Component {
    state = {
        users: [],
        isFirst: true,//是否为第一次打开页面,
        isLoading: false,//表示是否处于加载
        err: ''//存储请求相关错误信息
    }
    componentDidMount() {
        this.token = Pubsub.subscribe('atguigu', (msg, stateObj) => {
            this.setState(stateObj)
        })
    }
    componentWillUnmount() {
        Pubsub.unsubscribe(this.token)
    }
    render() {
        const { users, isFirst, isLoading, err } = this.state
        return (
            

                {
                    isFirst ? 
欢迎使用，请输入关键字进行搜索
 :
                        isLoading ? 
Loading........
 :
                            err ? 
{err}
 :
                                users.map((userObj) => {
                                    return (
                                        

                                            
                                                
                                            
                                            
{userObj.login}
                                        

                                    )
                                })
                }
            
        )
    }
}

export default class Search extends Component {
    search = () => {
        //读取用户的输入
        const { keyWordElement: { value: keyword } } = this
        // this.props.updateState({
        //     isFirst: false,
        //     isLoading: true
        // })
        Pubsub.publish('atguigu', {
            isFirst: false,
            isLoading: true
        })
        axios.get('http://localhost:3000/api1/search/users?q=' + keyword).then(
            res => {
                // this.props.updateState({
                //     isLoading: false,
                //     users: res.data.items,
                // })
                Pubsub.publish('atguigu', {
                    isLoading: false,
                    users: res.data.items,
                })
            },
            err => {
                // this.props.updateState({
                //     isLoading: false,
                //     err: err.message
                // })
                Pubsub.publish('atguigu', {
                    isLoading: false,
                    err: err.message
                })
            }
        )
    }
    render() {
        return (
            

                
Search Github Users
                

                     this.keyWordElement = c} type="text" placeholder="输入关键词点击输入" /> 
                    this.search}>搜索github用户
                
            
        )
    }
}

通过订阅与发布即可实现兄弟节点的信息互传，具体介绍查阅相关文档https://github.com/mroderick/PubSubJS