Стилизованные компоненты для цветных меток

Question

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

// An array of tags. The string hashes determine the color
<ColorTags tags={post.frontmatter.tags} inline/>

Это реализовано следующим образом:

components/
    ColorTags      // functional component
    ColorTagLI    // styled component
    ColorTagUL   // styled component

С:

// ColorTags
import ColorTagLI from './ColorTagLI'
import ColorTagUL from './ColorTagUL'

export default ({tags, inline}) => 
    <ColorTagUL>
        {tags.map( tag =>
            <ColorTagLI key={tag} colorString={tag} inline>
                <Link to="/">
                    {tag}
                </Link>
            </ColorTagLI>
        )}
    </ColorTagUL>



// ColorTagUL
export default styled.ul`
    list-style-type: none;
    margin: 0;
    padding: 0;
`


// ColorTagLI
const colorHash = new ColorHash({lightness: [0.4, 0.5, 0.6]});

const hslColor = cString => {
    const [h, s, l] = colorHash.hsl(cString)
    return `hsl(${h}, ${s*100}%, ${l*100}%)`
}

export default styled.li`
    color: white;
    background-color: ${props => hslColor(props.colorString)};
    display: ${props => props.inline ? 'inline-block' : 'block'};
    padding: 0.25rem 0.5rem;
    margin: 0.25rem;
    > a { text-decoration: none; color: white; }
`

У меня есть несколько вопросов:

• Какой хороший способ отличить стилизованные компоненты от обычных? я решили добавить тег HTML в стилизованные компоненты, так как они всегда связаны с этим.
• Не является ли проблемой наличие тега Link внутри компонента Styled?
• Должны ли компоненты ColorTag находиться в отдельной папке? Потому что они тесно связаны.
• Является ли использование inline prop умным способом переключения между конфигурациями? Это может привести к множеству условных операторов для полей, отступов и медиа-запросы ... Может быть, лучше сделать два разных компонента?

Answer 1

1. Вы можете использовать служебную функцию isStyledComponent.
2. Почему было бы проблемой иметь компонент Link внутри стилизованного компонента?
3. Мнение о том, что если вы считаете, что они тесно связаны, вы можете создать каталог /ColorTag с файлом index.js, который экспортирует только то, что должно быть открыто.
4. Да, это может привести к большому количеству условных операторов, поэтому вы можете расширить стили для стилевых компонентов .

Надеюсь, я вас правильно понял, и мои ответы ясны.