Идиоматический способ организовать код для раздела страницы, который отображает локальные и статические данные? - PullRequest
0 голосов
/ 19 октября 2018

Этот <Logos> компонент отображается внутри моего <Home> компонента:

import * as React from 'react';
import SectionContainer, { 
    InnerSectionContainer, 
    FlexContainer, 
    FlexItem 
} from '../../../ui/SectionContainer';
import ScaledImage from '../../../ui/ScaledImage';

const Logos = () => {
    return (
        <SectionContainer>
            <InnerSectionContainer>
                <SectionHeader>
                    Trusted by
                </SectionHeader>
                <FlexContainer>
                    <FlexItem>
                        <ScaledImage src={require('../../../images/logo1.png')} />
                    </FlexItem>
                    <FlexItem>
                        <ScaledImage src={require('../../../images/logo2.png')} />
                    </FlexItem>
                    <FlexItem>
                        <ScaledImage src={require('../../../images/logo3.png')} />
                    </FlexItem>
                    <FlexItem>
                        <ScaledImage src={require('../../../images/logo4.png')} />
                    </FlexItem>
                </FlexContainer>
            </InnerSectionContainer>
        </SectionContainer>
    );
};

export default Logos;

Я бы описал этот компонент как:

  • Довольно тупой, поскольку он не динамический, но, возможно, не совсем тупой, поскольку он включает в себя статические данные (текст заголовка раздела и URL-адреса изображений).
  • Довольно неинтересен как компонент пользовательского интерфейса многократного использования, поскольку он просто повторно использует другие компоненты пользовательского интерфейса простым способом

У меня есть следующая структура папок в моем проекте

components
--scenes
----home
------logos
--ui
connectors

Нет коннекторов для Home или Logo, поскольку они не имеют доступа к глобальному state.

Каков идиоматический способ организации кода, который у меня есть на данный момент в <Logos>, в проекте React Redux?

Вот некоторые варианты, которые, как я считаю, кажутся мне разумными:

  • Сохраняйте логотипы как есть, как не совсем тупой компонент в папке моих сцен
  • Сохраняйте логотипы как есть, но переводите встроенные данные в состояние, чтобы отделить контент от презентации
  • Создатьпротивnctor для логотипов, называемый чем-то вроде «TrusedBy», который предоставляет текст заголовка и URL-адреса компоненту логотипов, не сохраняя эти данные в глобальном хранилище, так как они больше нигде не нужны

Любой из этих вариантовболее идиоматичны, чем другие?Или есть какой-то другой идиоматический способ?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...