ReactJS中如何在无关联独立组件间调用其他组件的函数

两个不存在父子/层级关系的组件，无法直接通过props传参调用对方内部方法，根据实际场景选择以下成熟实现即可：

方案1：公共函数抽离（无组件内部状态依赖首选） #

如果start函数不依赖ComponentA内部的私有状态、生命周期变量，直接把函数抽离到独立公共工具文件，两个组件分别引入调用即可，是性能最好、维护成本最低的方案。

• 新建公共工具文件src/utils/common.js，定义公共函数：

export const start = () => {
  console.log('function called')
}

• 组件A中引入使用：

import { start } from '@/utils/common'
const ComponentA = () => {
  // 组件内逻辑中可直接调用start
  return <div>组件A</div>
}

• 组件K中引入绑定点击事件：

import { start } from '@/utils/common'
const ComponentK = () => {
  return (
    <img className='tour' src={tourIcon} height={25} width={25} onClick={start} />
  )
}

方案2：自定义事件总线（依赖组件A内部状态时使用，无额外依赖） #

如果start强依赖ComponentA内部的私有状态、必须定义在组件作用域内，用发布订阅模式实现一个极简事件总线即可，不需要引入第三方库。

• 新建事件总线工具src/utils/eventBus.js：

const eventHandlerMap = {}
export default {
  // 绑定事件监听
  on(eventName, callback) {
    if (!eventHandlerMap[eventName]) eventHandlerMap[eventName] = []
    eventHandlerMap[eventName].push(callback)
  },
  // 触发事件
  emit(eventName, ...params) {
    if (!eventHandlerMap[eventName]) return
    eventHandlerMap[eventName].forEach(cb => cb(...params))
  },
  // 解绑事件，避免内存泄漏
  off(eventName, callback) {
    if (!eventHandlerMap[eventName]) return
    eventHandlerMap[eventName] = eventHandlerMap[eventName].filter(cb => cb !== callback)
  }
}

• 在ComponentA中绑定事件监听，组件卸载时必须解绑：

import { useEffect, useCallback } from 'react'
import eventBus from '@/utils/eventBus'

const ComponentA = () => {
  // 用useCallback包裹函数，避免重渲染导致引用变化
  const start = useCallback(() => {
    console.log('function called')
    // 此处可正常访问ComponentA内部所有状态、变量
  }, [/* 填入start依赖的组件内部状态即可 */])

  useEffect(() => {
    eventBus.on('triggerStart', start)
    return () => {
      // 组件卸载时解绑事件，防止内存泄漏
      eventBus.off('triggerStart', start)
    }
  }, [start])

  return <div>组件A</div>
}

• 在ComponentK中触发事件即可调用对应方法：

import eventBus from '@/utils/eventBus'
const ComponentK = () => {
  const handleClick = () => {
    eventBus.emit('triggerStart')
  }
  return (
    <img className='tour' src={tourIcon} height={25} width={25} onClick={handleClick} />
  )
}

方案3：复用现有全局状态能力 #

如果项目已经接入Redux、Zustand、Jotai、React Context等全局状态方案，直接把start方法定义在全局store中暴露，两个组件从store中获取方法调用即可，不需要额外实现事件逻辑。

❌ 不推荐将函数直接挂载到window全局对象的实现方式，会污染全局命名空间，提升bug排查和内存管理的成本。

内容的提问来源于stack exchange，提问作者C P Verma