如何非常优雅地在React组件之间进行props传入函数的执行绑定(订阅)

有一个React的组件A和一个组件B

const CompA = () => {
  const expectProcess = () => {
    console.log('i am expected executing');
  }

  return (
    <div>A</div>
  )
}

const CompB = () => {
  const CompBClick = () => {
    console.log('comp B execute');
  }

  return (
    <div>
      <button onClick={CompBClick}>测试</button>
      <CompA />
    </div>
  )
}

我的需求是:

在组件CompB中单独调用执行CompBClick事件,同时希望CompA中的expectProcess执行完上述事件后会一块执行
我希望的优雅方式:两个组件高度解耦(可以有一个两者绑定的事件处理),即我只关心B中的方法,我只需要去执行B的方法,能同时带动A组件的方法。类似于两个函数绑定,一个驱动另一个。

希望的目的:
以优雅的方式实现A,B组件解耦,在执行A,B这两个方法绑定后,我只需要关心调用B的方法,即可驱动A组件的绑定事件。

我的解决方案:

  1. 先想到了观察者模式来实现,B作为发布者,A是订阅者,把A的方法订阅到B中,B中作为发布者调用发布方法,触发A的订阅方法,但是缺点是每次都要引用一次Observer(比较麻烦)
  2. 利用Object.defineProperty方法的getter setter拦截,把函数作为一个对象的属性,每次调用的时候去get里面拦截,执行A的方法,但是不够优雅,需要传递一个新对象,而且容易被覆盖。

想问问大家有没有什么比较优雅的解决方案,谢谢了。

阅读 2.1k
1 个回答

试试redux的监听?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题