Reactjs 彩色标签的样式化组件

样式化组件看起来很棒，但我在组织组件时遇到了问题。我第一次尝试的是一个标签列表，它会自动给标签上色。经过一些试验后，我想出了一个可以像这样使用的组件：

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

与：

//彩色标签
从“./ColorTagLI”导入ColorTagLI
从“./ColorTagUL”导入ColorTagUL
导出默认值（{tags，inline}）=>
{tags.map（tag=>
{tag}
)}
//彩色塔格尔
导出默认样式.ul`
列表样式类型：无；
保证金：0；
填充：0；
`
//彩色塔利
const colorHash=新的colorHash（{亮度：[0.4,0.5,0.6]}）；
常量hslColor=cString=>{
常量[h，s，l]=colorHash.hsl（cString）
返回'hsl（${h}，${s*100}%，${l*100}%）`
}
导出默认样式的.li`
颜色：白色；
背景色：${props=>hslColor（props.colorString）}；
显示：${props=>props.inline？'inline block'：'block'}；
填充：0.25雷姆0.5雷姆；
保证金：0.25雷姆；
>a{文本装饰：无；颜色：白色；}
`

我有一些问题：

• 区分样式化组件和常规组件的好方法是什么？我 决定将HTML标记附加到样式化组件，因为 他们总是与此联系在一起
• 将

  链接

  标记放在样式化组件中不是问题吗
• ColorTag组件是否应该位于它们自己的文件夹中？因为它们是紧密耦合的
• 使用

  inline

  道具在配置之间切换是否明智？可能 产生大量的边距、填充和填充条件语句 媒体查询。。。也许最好制作两个不同的组件

你可以用

为什么在样式化组件中有

链接
组件会有问题

根据您的意见，如果您认为它们是紧密耦合的，那么您可以使用

index.js

文件创建

/ColorTag

目录，该目录只导出应该公开的内容

是的，它可能会导致很多条件语句，这就是为什么你可以

---

我希望我对你的理解是正确的，我的答案很清楚。

一些很好的建议，一切都很清楚！重新审视链接组件：我认为最好的做法是将样式化组件放在层次结构的最低级别。很抱歉，为了后续问题而滥用您，但是。。。使用样式化组件（或js解决方案中的任何ccs）制作的任何东西似乎都依赖于它，包括功能部件。这将使组件很难交换（除非下一个人使用相同的库）。你怎么看这个？制造只能被React生态系统的一小部分使用的组件不是很糟糕吗？这是一个好问题，部分回答了这个问题。由于我使用的每个库

css

都在一个单独的文件中公开，或者作为CDN公开，这使用户能够使用他们想要的工具，并为安装的模块使用全局样式。但是，如果您的公司同意所有项目都将使用

样式化组件

，那么创建依赖它们的库是合理的。

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; }
`