javascript - HOC 组件 - 数组返回 true 或 false

Question

我现在有一个心理障碍，我有一个 HOC 组件正在检查如下所示的功能标志:

const withEnabledFeatures = (WrappedComponent: any) => {
      class WithEnabledFeatures extends React.Component<any> {
        enabledFeatures = (): Array<string> => {
          if (window === undefined) return [];
          return window.AH.featureFlags;
        }

        isFeatureEnabled = (feature: string): boolean => {
          return this.enabledFeatures.includes(feature);
        }

        render() {
          return (
            <WrappedComponent
              enabledFeatures={this.enabledFeatures()}
              isFeatureEnabled={this.isFeatureEnabled}
              {...this.props}
            />
          )
        }
      }
  };

export default withEnabledFeatures;

我将在另一个组件中使用它作为 Prop

isFeatureEnabled('feature_a');

如果存在则返回 true，如果不存在则返回 false。

我的问题是我的 isFeatureEnabled 函数正确吗？

Answer 1

不，您没有将 this.enabledFeatures 作为方法调用，您正在尝试访问其中的成员。使用 this.enabledFeatures()。 此外，HOC 工厂方法不会返回扩展类。

const withEnabledFeatures = (WrappedComponent: any) => {
      return class WithEnabledFeatures extends React.Component<any> {
        enabledFeatures = (): Array<string> => 
            (window === void 0) ? [] : window.AH.featureFlags;

        isFeatureEnabled = (feature: string): boolean => 
            this.enabledFeatures().includes(feature); // <-- Here, ()

        render() {
          return (
            <WrappedComponent
              enabledFeatures={this.enabledFeatures()}
              isFeatureEnabled={this.isFeatureEnabled}
              {...this.props}
            />
          )
        }
      }
  };

export default withEnabledFeatures;

(我还选择压缩了您的代码并添加了最佳实践，void 0)