Компонент HOC - массив возвращает true или false

У меня сейчас ментальный блок, у меня есть компонент 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;

И я буду использовать это как опору в другом компоненте, скажем

isFeatureEnabled('feature_a');

Который вернет true, если он существует, или false, если нет.

Мой вопрос, моя функция isFeatureEnabled правильная?

Внутри HOC вы забыли return WithEnabledFeatures

— 11.06.2019 16:12

javascript reactjs

11.06.2019 16:02

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Добавлен возврат внутри HOC для WithEnabledFeatures, а также исправлен оператор возврата isFeatureEnabled.

const withEnabledFeatures = (WrappedComponent: any) => {
      return 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;

11.06.2019 16:53

Ответ принят как подходящий

Нет, вы не вызываете 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)

11.06.2019 16:56