React - 返回使用另一个 HOC 的组件的 HOC

Posted 2023-02-21

【中文标题】React - 返回使用另一个 HOC 的组件的 HOC

【英文标题】：React - HOC that returns a component which uses another HOC

【发布时间】：2021-03-10 18:15:30

【问题描述】：

我有一个 HOC“withFirebase”，它基本上为我的组件提供了一个与 Firebase 服务通信的接口。

现在，我正在实现另一个 HOC“withNotificationsListener”，它将接收一个组件和一个路径，然后返回另一个使用“withFirebase”HOC 的组件。

这是我第一次创建一个 HOC，它返回一个也使用另一个 HOC 的组件...我的问题基本上是这段代码是否可能：

const withNotificationsListener = (WrappedComponent, notificationsDBPath) =>
  withFirebase((props) => 
    const listenNotifications = () => ;

    useEffect(() => 
      // TODO - Attach db listener subscription
      return () => 
        // TODO - Detach db listener subscription
      ;
    , []);

    return <WrappedComponent ...props />;
  );

遵循 HOC 定义“接收一个组件并返回另一个组件的函数”，这对我来说是有意义的，因为最终 withFirebase 返回一个组件......但我很怀疑，因为从词法上讲，严格来说，我不返回一个直接组件，而是一个函数。

这种创建此 HOC 的方式是否有效？还是其他方式？

【问题讨论】：

这对我来说似乎是正确的。您返回的不是函数，而是调用该函数的结果。

【参考方案1】：

看起来几乎是正确的，因为你的道具​​不能是大写的，你需要先解构它们。当你通过 prop 传递组件时 例如组件=WrappedComponent

您可以在 WithNotificationListener 组件中对其进行解构。 例如const withNotificationsListener = (component: WrappedComponent, notificationsDBPath) => ...

应该可以。 附加的链接更深入地解释了为什么需要解构道具。 Destructure example

【讨论】：

我对此表示怀疑，因为根据文档，HOC 是一个函数（我认为不是函数组件）。如果是这种情况，则必须将映射作为参数传递给函数以进行解构，而不是作为经典组件的“道具”

我的意思是，在使用 HOC 时，我会这样做： const NotificationListenerStackButton = withNotificationsListener( StackButton, notificationsDBPath ); 其中 StackButton 是原始组件，它将接收来自 HOC 的通知属性

我明白了，在这种情况下，如果您严格将其用作函数，则可能无法在 HOC 内运行 useEffect。 UseEffect 只能在 react 组件内渲染。

useEffect 被执行是因为它不在函数内部，而是在具有 ES6 语法的函数组件内部。

无论如何我都尝试过实现代码并且工作正常！谢谢！