从单独的第三方组件调用功能组件的方法

Question

我有一个无状态功能组件<table mat-table [dataSource]="dataArr[0]">，该组件使用第三方依赖项，该第三方依赖项具有在激发来自单独组件ReceivingComponent的事件时要调用的方法。

在我的示例中，我有一个包含TransmittingComponent实例的Map组件，当它从具有MapBox事件的单独组件接收到事件时，我正在尝试触发resize方法。 / p>

该问题的大多数解决方案都涉及使用onDrag访问组件方法，但是由于我使用的是功能组件，因此无法使用refs，因此我正在探索其他解决方案。

我与Redux一起工作，在其中我将商店中的布尔值设置为refs，然后在true内有一个useEffect，即布尔值为ReceivingComponent true方法被调用。然后，将存储中的布尔值重置为doThing。它有效，但会使我的皮肤爬行。

false

在其他框架中，我可以创建一个事件总线，该事件总线在<ParentComponent> <ReceivingComponent doThing={}/> <TransmittingComponent onEvent={} /> </ParentComponent> 触发其事件时发出一个事件。然后在TransmittingComponent内部，我监听该事件，然后触发所需的方法。但是我找不到用React或Redux做到这一点的方法。

React / Redux是否有一种方法，可以在不使用ReceivingComponent的情况下从另一个组件访问组件方法。甚至发出全局事件并从另一个组件监听该事件？

Answer 1

在可以控制ReceivingComponent的情况下，实现此目的的方法之一是将TransmittingComponent作为子级传递。

 <ReceivingComponent>
    {({doThing}) => <TransmittingComponent onClick={doThing} />}
 </ReceivingComponent>

这里是sandbox

但是，如果这些组件是同级的，那么我想到的另一种选择是使用ParentComponent中的某种状态来通知ReceivingComponent该事件已被触发。

这里是另一个sandbox

我想它与您使用Redux所做的有点相似。 看起来可能并不那么性感，但是我在FRP中也看到了这种模式，可以将DOM事件以某种方式转换为流。