React Native如何在HOC中包装组件

Question

简介

我有一个组件，该组件有条件地返回包装在HOC“ withCache”中的组件“ Image”或同一组件“ Image”，因此最后一个组件名为“ CachedImage”。

我正在做这样的事情：

有条件的渲染顶部组件

class ProgressiveImage extends React.PureComponent {
  static propTypes = {
    theme: PropTypes.shape({
      colors: PropTypes.object.isRequired,
    }).isRequired,
    cached: PropTypes.bool,
    uri: PropTypes.string.isRequired,
    imageFadeDuration: PropTypes.number,
    thumbnailUri: PropTypes.string,
    thumbnailBlurRadius: PropTypes.number,
    thumbnailFadeDuration: PropTypes.number,
    loadingColor: PropTypes.string,
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  };

  static defaultProps = {
    cached: false,
  };

  render() { // <----------------
    const {
      theme: { colors },
      cached,
      style,
    } = this.props;

    return (
      <View
        style={[
          style || styles.container,
          { backgroundColor: colors.background },
        ]}
      >
        {cached ? <CachedImage {...this.props} /> : <Image {...this.props} />} // <-------------
      </View>
    );
  }
}

如您所见，在render方法中，我正在按照我说的做。现在，我将“ Image”组件包装在withCache HOC中，如下所示：

包裹在HOC中的组件

const CachedImage = withCache(
  class CachedImage extends React.PureComponent {
    render() {
      return <Image {...this.props} />;
    }
  }
);

但是我认为创建一个新的类组件是不必要的，并且可能还有其他正确的方法来实现这一点。

我尝试过：

const CachedImage = withCache(Image);

但是没有用。我的图片组件是一种具有渐进式渲染图像并扩展React.PureComponent的逻辑的组件。

有什么想法吗？谢谢。