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

Question

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

现在，我正在实现另一个HOC"with NotificationsListener"，它将接收一个组件和一个路径，然后返回另一个使用"with Firebase"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的方法有效吗？还是其他方式？

Answer 1

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

而在WithNotificationListener组件中，您可以对其进行分解。e、 g.const with notificationsListener=（{component:WrappedComponent，notificationsDBPath}）=

这应该行得通。附加的链接更深入地解释了为什么需要分解道具。解构示例