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 native navigation的static options()应用的样式

Answer 1

所以我设法通过另一篇文章中的answer使它起作用。

这是工作版本

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

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

1 个答案: