针对兄弟节点信息互通的方案

采取一个插件

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 (
      <div className="container">
        <Search />
        <List />
      </div>
    )
  }
}

 

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 (
            <div className="row">
                {
                    isFirst ? <h1>欢迎使用，请输入关键字进行搜索</h1> :
                        isLoading ? <h2>Loading........</h2> :
                            err ? <h1>{err}</h1> :
                                users.map((userObj) => {
                                    return (
                                        <div key={userObj.id} className="card">
                                            <a rel="noreferrer" href={userObj.html_url} target="_blank">
                                                <img alt="" src={userObj.avatar_url} style={{ width: '100px' }} />
                                            </a>
                                            <p className="card-text">{userObj.login}</p>
                                        </div>

                                    )
                                })
                }
            </div >
        )
    }
}

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 (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击输入" />&nbsp;
                    <button onClick={this.search}>搜索github用户</button>
                </div>
            </section>
        )
    }
}

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