react组件通信

react中组件通信方法有两种，第一种是利用父子组件的props通信，然后达到全组件互相通信，适合用于两个直接相连的父子组件；第二种是利用PubSubjs，这是一个外部的库，所以需要你额外去下载，适合复杂的组件之间进行通信。具体使用方法如下：

props实现父子组件通信

//父组件
export default class App extends Component {
  //定义传给子组件的数据
  state = { 
    users: [1,2,3,4]
  }
  render() {
    return (
      <div>
        {/* 将users传递给子组件 */}
        <List users={this.state.users}/> 
      </div>
    )
  }
}

//子组件
export default class List extends Component {
  render() {
    // 接收父组件传来的东西
    let {users} = this.props
    return (
      <div>
        {
          users.map((item, index) => {
            return (
              <div key={index}>{item}</div>
            )
          })
        }
      </div>
    )
  }
}

实际效果：

因此我们可以知道，父组件只需要像这样将数据传递给子组件就可以了，然后子组件就可以调用this.props去使用父组件传递过来的数据。（这些数据可以是字符串，数字，数组等，也可以是函数，这样子组件就可以拿到父组件里面的函数并调用了）

PubSub实现组件通信

首先需要下载PubSub，命令行：npm i pubsub-js --save
然后就引入：import PubSub from 'pubsub-js'
接着开始使用：
首先在发布方，即发送数据的一方进行编写：

export default class Search extends Component {
  pubsubP = () => {
    PubSub.publish("Ginseng", {data: "search传的数据"})
  }
  render() {
    return (
      <div>
        <button onClick={this.pubsubP}>触发函数</button>
      </div>
    )
  }
}

然后在订阅方，即接收数据并对数据进行操作的一方进行编写：

export default class List extends Component {
  componentDidMount() {
    PubSub.subscribe("Ginseng", (_,res) => {
      console.log(res);
    })
  }
  render() {
    return (
      <div>
      </div>
    )
  }
}

在这里需要注意，subscribe函数中需要有两个参数，如果只有一个的话表示的是名字，即Ginseng，所以可以使用占位符占用第一个参数，然后实际接收的是第二个参数。具体实现效果：