react中的两种组件通信方法

1.通过父组件创建的方法，以及props来实现

例子： 组件A，组件B，组件B要更改组件A中state的数据

A

  render() {

    return (

      <div>{this.props.name}</div>

    )

  }

B

  handleUpdataName = (event)=>{

    // 判断是否按下回车  按下回车调用App传过来的updataName方法更新数据

    if(event.keyCode!==13) return;

    this.props.updataName(event.target.value)

  }


  render() {

    return (

      <div>

        {/* 按键绑定，抬起时触发handleUpdataName */}

        <input onKeyUp={this.handleUpdataName} type="text" placeholder='请输入要改的名字，按回车更新'/>

      </div>

    )

  }

App

  // 在B组件中改name的方法

  updataName = (name)=>{

    this.setState({name})

  }

// A组件要用的数据

  state = {name:'zhang'}

  render() {

    return (

      <div>

        <A name = {this.state.name}/>

        <B updataName={this.updataName}/>

      </div>

    )

  }

2.消息订阅与发布。

需要下载第三方包pubsub-js（https://github.com/mroderick/PubSubJS）

使用方法

先npm安装在导入

Import PubSub from ‘pubsub-js’

导入后在要订阅的组件的componentDidMount钩子中写

this.id = PubSun.subscribe(‘name’,(name,data)=>{})

同时记得在componentWillUnmount钩子中卸载订阅

PubSub.unsubscribe(this.id)

在发布消息的组件中写

PubSun.publish(‘name’,data)

例子：组件A，组件B，组件B要更改组件A中state的数据

       A

  // 组件挂在完毕

  componentDidMount(){

    // 消息订阅

    this.updataNameId = PubSub.subscribe('updataName',(_,name)=>{

      this.setState({name})

    })

   

  }

    // 组件将要销毁

  componentWillUnmount(){

    // 取消订阅

    PubSub.unsubscribe('updataNameId')

  }

  // 数据

  state = {name:'zhang'}

  render() {

    return (

      <div>{this.state.name}</div>

    )

  }

       B

  handleUpdataName = (event)=>{

    // 判断是否按下回车  

    if(event.keyCode!==13) return;

    // 发送消息

    PubSub.publish('updataName',event.target.value)

  }

 

  render() {

    return (

      <div>

        {/* 按键绑定，抬起时触发handleUpdataName */}

        <input onKeyUp={this.handleUpdataName} type="text" placeholder='请输入要改的名字，按回车更新'/>

      </div>

    )

  }

App

  render() {
    return (
      <div>
        <A/>
        <B/>
      </div>
    )
  }