用钩子反应功能性 HOC 组件，复制静态方法

Question

我有一个使用钩子的功能性 HOC 组件。

我

正在使用Wix本机导航，并且我的大部分屏幕都使用静态方法。

但是使用 HOC 时不会复制静态方法：

但是，当您将 HOC 应用于组件时，原始组件是 用容器组件包装。这意味着新组件可以 没有原始组件的任何静态方法。

我正在尝试使用hoistNonReactStatic但没有成功：

这是我的 HOC：

const WithOfflineAlertContainer = WrappedComponent => (props) => {
  const isConnected = useNetInfo();
  return hoistNonReactStatics(
    <Fragment>
      <WrappedComponent {...props} />
      {!isConnected && <OfflineAlert />}
    </Fragment>, WrappedComponent,
  );
};

这是将hoc与wix-react-native-navigation一起使用的方式：

  Navigation.registerComponentWithRedux(screens.gallery, () => WithOfflineAlert(Gallery), Provider, store);

但它似乎不起作用，因为我没有看到从 wix 本机导航中应用的static options()

Answer 1

所以我设法使用另一篇文章中的这个答案让它工作。

这是工作版本

const WithOfflineAlert = (Component) => {
  const WrappedComponent = (props) => {
    const isConnected = useNetInfo();
    return (
      <Fragment>
        <Component {...props} />
        {!isConnected && <OfflineAlert />}
      </Fragment>
    );
  };
  hoistNonReactStatics(WrappedComponent, Component);
  return WrappedComponent;
}