消息的订阅与发布（子组件间的通信）

一般我们在React中，子组件与子组件之间的通信都借助父组件来完成，

如下：

App.js（父组件）

import React, { Component } from 'react'
import Search from './components/Search'
import Content from './components/Content'

export default class App extends Component {
  state = {
    list:'',//存放search子组件传递过来的数据，同时交给Content子组件使用
  }
  // 获取值
  handleInfo  = (list) => {
    this.setState({list})
  }
  
  render() {
    return (
      
"container">
        this.handleInfo}/>
        this.state.list}/>
      

    )
  }
}

（子组件）src/components/Search/index.jsx

import React, { Component } from 'react'

export default class Search extends Component {
　// 搜索
  search = () => {
    // 获取输入框中数据
    const {value} = this.inputworlds;
    this.props.handleInfo(value);//通过handleInfo方法向App.js传递数据，供子组件Content使用
  }
  
  render() {
    return (
      
"jumbotron">
        
"jumbotron-heading">子组件之间的通信
        

          "text" placeholder="请输入用户名..." ref={e => this.inputworlds = e} /> 
          this.search}>搜索
        
      

    )
  }
}

（子组件）src/components/Content/index.jsx

import React, { Component } from 'react'

export default class Content extends Component {

  render() {
　　// 获取search子组件传递过来的数据，进行渲染
    const {list} = this.props
    return (
      
"row">
        {list}
     

    )
  }
}

上面这种方法，是通过父组件来进行子组件与子组件之间的通信，

1、通过在父组件存放状态、方法，

2、然后子组件1获取的数据通过父组件传递过来的props中的方法，传递给父组件App.js,

3、父组件App.js再通过props传递给子组件2，子组件2通过父组件传递过来的数据，this.props.XX来使用

第二种方便的：

消息的订阅与发布：

安装插件：

npm install pubsub-js
// 或者
yarn add pubsub-js