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

Question

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

我正在使用 Wix Native Navigation，并且我的大部分屏幕都使用静态方法。

但使用 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);

但它似乎不起作用，因为我没有看到 static options() 从 wix native navigation 应用的样式

Answer 1

所以我设法使用另一个帖子中的 answer 使其工作。

这是工作版本

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