从一个react组件中激发另一个react组件的函数

从一个React组件中激发另一个React组件的函数可以通过以下几种方式实现：

Props传递：可以通过将函数作为props传递给子组件，子组件可以在需要的时候调用该函数。父组件定义一个函数，并将其作为props传递给子组件，子组件可以通过props调用该函数。

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

class ParentComponent extends React.Component {
  handleClick() {
    console.log('函数被激发');
  }

  render() {
    return (
      <div>
        <ChildComponent onClick={this.handleClick} />
      </div>
    );
  }
}

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

class ChildComponent extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>激发函数</button>
    );
  }
}

export default ChildComponent;

Context上下文：可以使用React的Context API来实现组件之间的函数传递。父组件可以将函数定义在Context中，子组件可以通过Context访问并调用该函数。

// 创建一个Context
const MyContext = React.createContext();

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

class ParentComponent extends React.Component {
  handleClick() {
    console.log('函数被激发');
  }

  render() {
    return (
      <MyContext.Provider value={this.handleClick}>
        <ChildComponent />
      </MyContext.Provider>
    );
  }
}

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

class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {handleClick => (
          <button onClick={handleClick}>激发函数</button>
        )}
      </MyContext.Consumer>
    );
  }
}

export default ChildComponent;