Javascript React Native如何在HOC中包装组件 介绍

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

我正在做这样的事情：

条件渲染顶部组件 但是没有起作用。My Image component是一个拥有所有用于渐进式渲染图像的逻辑并扩展React.PureComponent的组件

有什么想法吗？多谢各位

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>
    );
  }
}

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

const CachedImage = withCache(Image);