如何将React封装组件的实现步骤转化为一个长尾关键词？

本文共计1740个文字，预计阅读时间需要7分钟。

目录+前言+antd+如何封装组件的 divider+组件源代码+如何暴露组件属性+如何设置系统一类名称前缀+如何处理样式与类名+组件样式源代码+前言+很多小伙伴在第一次尝试封装组件时，会遇到一些问题。

目录

• 前言
• antd 是如何封装组件的
• divider 组件源代码
• 如何暴露组件属性
• 如何设置统一类名前缀
• 如何处理样式与类名
• divider 组件样式源代码

前言

很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题，比如人家的组件会有 color 属性，我们在使用组件时传入组件文档中说明的属性值如 primary ，那么这个组件的字体颜色会变为 primary 对应的颜色，这是如何做到的？还有别人封装的组件类名都有自己独特的前缀，这是如何处理的呢，难道是 css 类名全部加上前缀吗，这也太麻烦了！

如果你正在困惑这些问题，你可以看看这篇文章。