在父组件中的操作之后在子组件中运行函数

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  handleFunction() {
    // 在父组件中的操作之后运行的函数
    console.log('运行函数');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleFunction}>点击运行函数</button>
        <ChildComponent runFunction={this.handleFunction} />
      </div>
    );
  }
}

// 子组件
import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.runFunction}>在子组件中运行函数</button>
      </div>
    );
  }
}

export default ChildComponent;

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

const MyContext = React.createContext();

class ParentComponent extends React.Component {
  handleFunction() {
    // 在父组件中的操作之后运行的函数
    console.log('运行函数');
  }

  render() {
    return (
      <MyContext.Provider value={this.handleFunction}>
        <div>
          <button onClick={this.handleFunction}>点击运行函数</button>
          <ChildComponent />
        </div>
      </MyContext.Provider>
    );
  }
}

// 子组件
import React from 'react';
import MyContext from './MyContext';

class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {runFunction => (
          <div>
            <button onClick={runFunction}>在子组件中运行函数</button>
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}

export default ChildComponent;

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
import EventEmitter from 'eventemitter3';

const eventEmitter = new EventEmitter();

class ParentComponent extends React.Component {
  handleFunction() {
    // 在父组件中的操作之后运行的函数
    console.log('运行函数');
    eventEmitter.emit('runFunction');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleFunction}>点击运行函数</button>
        <ChildComponent />
      </div>
    );
  }
}

// 子组件
import React from 'react';
import eventEmitter from './eventEmitter';

class ChildComponent extends React.Component {
  componentDidMount() {
    eventEmitter.on('runFunction', this.runFunction);
  }

  componentWillUnmount() {
    eventEmitter.off('runFunction', this.runFunction);
  }

  runFunction() {
    // 在子组件中运行函数
    console.log('运行函数');
  }

  render() {
    return (
      <div>
        <button onClick={this.runFunction}>在子组件中运行函数</button>
      </div>
    );
  }
}

export default ChildComponent;