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

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

0 голосов
/ 28 сентября 2018

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

Ответы [ 3 ]

0 голосов
/ 28 сентября 2018

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

Полная работающая функция скрытия / отображения песочницы онлайн: 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;
      }}
    />
0 голосов
/ 29 сентября 2018

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

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

    Недостатки:

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

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

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

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

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

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

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

0 голосов
/ 28 сентября 2018

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

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

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

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

...