跨组件通信 (3)

子组件将数据传递给父组件

import React from 'react';

class Son extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'xiebenyin'
    }
  }
  render() {
    return (
      <div>
        <h2>Son</h2>
        <button onClick={() => this.props.myFn(this.state.name)}>按钮</button>
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <Son myFn={(name) => this.myFn(name)} />
      </div>
    )
  }
  myFn(name) {
    alert(name);
  }
}
export default App;

• 在父组件  App 中定义一个  myFn 函数并且该函数接收一个参数
• 在使用子组件  Son 时传递一个参数  myFn ，然后在子组件中触发该函数时传递参数
• 当层级复杂时，这种从内向外的传递十分不方便

使用第三方包解决

安装

npm i events

使用

import React from 'react'
import {EventEmitter} from 'events'
// 创建全局事件管理器对象
const eventBus = new EventEmitter()

class Son extends React.Component {
  render() {
    return (
      <div>
        <h3>Son</h3>
        <button onClick={() => this.btnClick()}>按钮</button>
      </div>
    )
  }
  btnClick = () => {
    // 触发 myFnEvent 事件
    eventBus.emit('myFnEvent' , 'xiebenyin')
  }
}
class Father extends React.Component {
  render() {
    return (
      <div>
        <h2>Father</h2>
        <Son />
      </div>
    )
  }
}

class App extends React.Component {
  componentDidMount() {
    // 注册一个事件 myFnEvent
    eventBus.addListener('myFnEvent', this.myFn)
  }

  render() {
    return (
      <div>
        <h1>App</h1>
        <Father />
      </div>
    )
  }
  myFn = (name) => {
    alert(name);
  }
}

export default App;

• 从  events 包中解构导入  EventEmitter 对象
• 创建一个全局事件管理器对象  eventBus 
• 在祖先  App 组件中通过  eventBus.addListener 函数注册一个  myFnEvent 事件
• 在后代  Son 组件中通过   eventBus.emit 函数触发  myFnEvent 事件， eventBus.emit 第二个参数及后面所有的参数是传递给该事件的参数
• 组件卸载时调用  eventBus.removeListener('myFnEvent'); 删除其对应的事件