江苏龙网

  1. 主页 > 生活百科 > >

我再也不敢说我会写前端 Button组件「实践」( 四 )

前端 Button组件


class ButtonGroup extends React.PureComponent<AbstrunctButtonGroupProps> {renderButtonGroup = ({ getPrefixCls }: ConfigConsumerProps) => {const {prefixCls: customizePrefixCls,className,..., // 不展开写了children} = this.props;const prefixCls = getPrefixCls('button-group', customizePrefixCls);const classes = classNames(prefixCls, className, ...不展开写了);// 渲染子childrenreturn (<div style={style} className={classes}>{children}</div>);};render() {return <ConfigConsumer>{this.renderButtonGroup}</ConfigConsumer>;}}最后决定 ， 给 ButtonGroup 一个 size 属性 ， 由这个属性决定组合按钮的样式 ， 换言之 ， 我不管你Button给什么尺寸 ， 以我为准 ， 下面这段代码最终显示的样式 ， 是小尺寸的样式
<ButtonGroup size="small"><Button size="large">取消</Button><Button size="middle">提示</Button><Button size="thumb">危险</Button></ButtonGroup>怎么做到的？老规矩 ， 重写样式咯~
.@{button-group-prefix-cls} {// 解决组件大小组合使得高度、宽度不一致问题&-small {.@{button-prefix-cls} {min-width: @button-sm-width;height: @button-sm-height;line-height: @button-sm-height;font-size: @button-sm-font-size;}}} ButtonIcon 的支持正常来说 ， 我们图标组件 ， 只需要这样就可以解决
<Button><Icon />图标按钮</Button>但我为什么还要加一个 ButtonIcon ， 因为视觉和交互有个骚操作 ， 那就是 : Icon 会变色 ， 包括它的状态会跟你当前按钮有强关联的关系 。所以这边只能基于ButtonHoc 衍生出此类型按钮~
<ButtonIcon icon={} color="danger">带有图标的危险按钮</ButtonIcon>其它对于整个 Button 组件的代码 ， 我放在了这里 : Button 源码 ， 因为文章不想贴太多代码 ， 有想法的可以移步哈~ 当然 ， 我更加希望的是你能去看源码 ， 因为你看完之后 ， 你就觉得我写的是渣了~ 我只是借鉴参考其中的一些设计思想 ， 低成本的开发了一个公共组件~
总结谢谢你看到这里 ， 最近也是开发了一些公共组件 ， 说一下自己感想吧 ， 我之前一直想自己做一个组件库 ， 造个轮子 ， 对于写 UI 组件库来讲 ， 最简单就是写一个Button组件了 ， 那是“年少轻狂” ， 感觉 Button 组件这么简单 ， 是最好写的组件了 ， 但现在回过头来看 ， 越简单的东西 ， 越难!!!
在此之前 ， 自己属于使用者 ， 创项目时 ， 总会 npm install UI库 ， 基于该库 ， 简单的二次封装 ， 但从未去看过它内部的实现原理 ， 直到这次 ， “迫不得已”去看的源码 ， 看了之后 ， 才发现 ， 人与人之间真的有差距 。
开源即责任 ， 如果你做的东西 ， 想被更多人使用 ， 那就意味着 ， 你得承担更多！每个人都有一个开源梦 ， 我之前也造过轮子 ， 这个 vue-erek-manage 是我之前借鉴 Ant Design Pro 造的 ， 我天真以为做完这个东西 ， 功能实现了 ， 就能给大家用了 ， But ， 我自己用了之后 ， 分分钟想捶死自己 ， 以当时我的能力 ， 我的设计缺陷 ， 我的代码风格 ， 我的技术水平 ， 导致我在使用过程需要不断的去改框架里的代码 。
 





推荐阅读


上一篇：淘宝转化率低怎么提升 淘宝转化低怎么提高

下一篇：开淘宝店必备的软件 手机淘宝开店软件哪个最好用