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标记附加到样式化组件，因为他们总是与之相关。
在Styled组件中包含Link标签不是问题吗？
ColorTag组件应该在自己的文件夹中吗？因为它们是紧密耦合的。
使用inline道具以智能方式在配置之间切换？有可能导致边距，填充和填充的许多条件语句媒体查询......或许最好制作两个不同的组件？

Answer 1

您可以使用utility function isStyledComponent.
为什么在样式化组件中有Link组件会有问题？
意见问题，如果您认为它们是紧密耦合的，您可以使用/ColorTag文件创建index.js目录，该文件仅导出应该公开的内容。
是的，可能会产生很多条件陈述，这就是extend styles on styled components的原因。

我希望我理解你，我的答案很清楚。

彩色标签的样式组件

1 个答案: