Приложение Compose React, основанное на значении флага - PullRequest
Новая
       25

Приложение Compose React, основанное на значении флага

0 голосов
/ 09 октября 2018

Формулировка проблемы:

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

Например:

У меня есть компонент App, состоящий из трех компонентов по умолчанию:

ComponentA, ComponentB и ComponentC. 

<App> 
    <ComponentA />
    <ComponentB />
    <ComponentC />
<App/>

Теперь, если мой флаг равен ShowC, яхочу, чтобы мое приложение отображало ComponentA, ComponentB и ComponentC.

Если флаг равен ShowD, то вместо ComponentC я хочу вместо этого визуализировать ComponentD. 

<App> 
    <ComponentA />
    <ComponentB />
    <ComponentD />
<App/>

Решение:

Я использовал объект конфигурации, который имеет соответствующий импорт в виде пар ключ-значение: 

{
    showC: {
        pos1: ComponentA,
        pos2: ComponentB,
        pos3: ComponentC,
    },
    showD: {
        pos1: ComponentA,
        pos2: ComponentB,
        pos3: ComponentD,
    }
}

Теперь, в моем основном App.js: 

render() {
    const {
        pos1: FirstComponent,
        pos2: SecondComponent,
        pos3: ThirdComponent
    } = config[<flag>];

    <App>
        <FirstComponent />
        <SecondComponent />
        <ThirdComponent />
    </App>
}

Я создал простой пример для stackblitz, иллюстрирующий это.

https://stackblitz.com/edit/react-app-components-config?file=index.js

Я хочу понять, считается ли создание компонентов таким способом анти-паттерном в React?Или если есть лучшее решение этой проблемы?

1 Ответ

0 голосов
/ 09 октября 2018

вы можете создать HOC, который будет решать, что отображать, основываясь на флаге 

const DynamicComponent = ({type,children}) => (

  { // you can have any condition here.
    type === 'a'?
    children[0]:
    children[1]
  }

)

// ваш главный компонент 

render() {

    <App>
        <FirstComponent />
        <SecondComponent />
        <DynamicComponent type={config.type}> 
           <ThirdComponent />
           <FourthComponent />
        </DynamicComponent>
    </App>
}

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

...