Как глобально отключить / скрыть / заменить компонент по имени в React?

Question

У меня есть большое приложение React, и у меня есть несколько компонентов, которые я хотел бы полностью отключить из конфигурации или глобального уровня. Есть ли какой-нибудь глобальный хук, который я могу использовать, который вызывается до того, как какой-либо компонент будет обработан? Если это так, я думаю, что я могу проверить имя компонента и вернуть null если имя есть в списке отключенных. Как бы вы это сделали?

Answer 1

1. Если вам нужно самое простое решение, просто используйте глобальные переменные браузера и отметьте его в рендере.

   render() { if( window.globalFlag ) return null return ( <div> feature content...

   Недостатки:

   • модифицирующий компонент,
   • используя глобальную область видимости,
   • какой-то ненужный код можно запустить раньше (например, constructor) и позже (например, componentDidMount).

2. Используйте HOCs - оберните ваш компонент - соединяясь с глобальным хранилищем, используя Redx или Context API.

   <FlagsProvider store={flagStore}> <SomeComponent_1> <SomeComponent_2> <FlagsConsumer flag="someFeatureFlag"> <SomeFeatureComponent />

   <FlagsConsumer/> подключается к хранилищу (избыточный соединитель будет внутренней оберткой, составляющей HOC) и условно отображает <SomeFeatureComponent /> (или ноль).

   Конечно, HOC может передавать полученные реквизиты обернутому компоненту - он может быть функционально прозрачным.

3. Не изобретайте колесо - используйте какой-нибудь готовый модуль, прочитайте учебники, Google для этого подходит.

HOC также может играть роль A/B-тестирования.

Answer 2

Есть много способов сделать это, поэтому я просто опишу один простой способ: использование ссылок и соответствующее обновление состояний.

Полная рабочая функция скрытия / отображения песочницы онлайн: codesandbox.io ReactJS Функция скрытия / демонстрации

Определены два класса, class Feature extends React.Component а также class App extends React.Component, render() за <Feature/> является...

  render() {
    if (!this.state.enabled) {
      return <div />;
    }
    return (
      <div className="Feature">
        <h1>My Feature!</h1>
      </div>
    );
  }

И возможность включить / отключить функцию в <App /> будет обрабатывать отображение / скрытие так...

  handleOnClick(e) {
    if (e.target.checked) {
      this.feature.setState({ enabled: true });
    } else {
      this.feature.setState({ enabled: false });
    }
  }

Конечно, вы должны убедиться, что <Feature /> имеет набор ссылок...

    <Feature
      ref={instance => {
        this.feature = instance;
      }}
    />

Answer 3

Есть много способов сделать это:

Контекстный API React позволяет пропускать реквизиты через каждый уровень дерева компонентов, чтобы вы могли использовать их в качестве флагов для включения / отключения компонентов. Однако следует использовать экономно.

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

Или, конечно, вы можете использовать глобальный менеджер состояний, такой как redux, для установки глобальных состояний.