React中如何在一个类组件中调用另一个类组件的函数

以下方案默认基于React类组件场景，其他前端框架的类组件逻辑基本通用：

方案1：公共父组件透传（父子/兄弟组件首选） #

如果两个组件为父子关系，或是存在公共父级的兄弟组件，直接将方法放在公共父级统一管理，通过props透传给两个组件即可：

// 公共父组件
class Parent extends React.Component {
  intializeHandler = () => {
    // 原方法的业务逻辑
  }

  render() {
    return (
      <>
        <Component1 intializeHandler={this.intializeHandler} />
        <Component2 intializeHandler={this.intializeHandler} />
      </>
    )
  }
}

// Component2 中直接通过props调用
class Component2 extends React.Component {
  render() {
    return <button onClick={this.props.intializeHandler}>触发方法</button>
  }
}

方案2：抽离公共工具函数（无状态复用首选） #

如果intializeHandler不依赖Component1的内部state、实例属性，直接把方法抽成独立的公共工具，两个组件分别导入使用即可：

• 新建公共工具文件 common.js

export const intializeHandler = () => {
  // 原方法的业务逻辑
}

• Component2 中导入调用

import { intializeHandler } from './common'

class Component2 extends React.Component {
  componentDidMount() {
    intializeHandler()
  }
}

方案3：Context全局共享（跨层级组件场景） #

如果两个组件层级相差很大，层层透传props成本过高，可以用React Context做全局共享：

// 新建全局Context
const AppContext = React.createContext()

// 根组件用Provider包裹业务逻辑
class App extends React.Component {
  intializeHandler = () => {
    // 原方法的业务逻辑
  }

  render() {
    return (
      <AppContext.Provider value={{ intializeHandler: this.intializeHandler }}>
        <Component1 />
        <Component2 />
      </AppContext.Provider>
    )
  }
}

// Component2 中调用Context里的方法
class Component2 extends React.Component {
  static contextType = AppContext
  componentDidMount() {
    this.context.intializeHandler()
  }
}

方案4：类继承（强关联组件场景） #

如果两个组件逻辑本身强关联，可以让Component2直接继承Component1，直接调用父类方法即可：

class Component1 extends React.Component {
  intializeHandler() {
    // 原方法的业务逻辑
  }
}

class Component2 extends Component1 {
  componentDidMount() {
    this.intializeHandler()
  }
}

注意：该方案耦合度很高，非强关联组件不推荐使用

内容的提问来源于stack exchange，提问作者Jayesh