【练习案例React七】React结合ant design封装一个按钮组件
目录
前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷
导语
大家好 我是歌谣 目前开源项目的一个提交已经进入了一个新的阶段 如今已经加入了项目中的一个按钮组件封装 此功能模块建议接触过ant design+react的同学阅读 无基础者会引起不适
父子组件调用
首先我们看一下父子组件的一个调用
父组件
第一步
import ButtonGroup from './Common/ButtonGroup/index.js';第二步
<ButtonGroup buttonList={aloudList} maxShowCount={3}></ButtonGroup>子组件
class ButtonGroup extends Component {
render() {
const { buttonList = [], maxShowCount = 4, style = {} } = this.props;
//1.打印出传入的buttonList的值
console.log(buttonList,"我是传入的初始值buttonList")
let _buttonList = buttonList.filter((item) => !item.hide);
//2打印出过滤的hide不是true的值
console.log(_buttonList,"我是过滤后不是true的值_buttonList")
console.log(_buttonList.slice(maxShowCount),"我是截取后的值_buttonList")
const menu = (
<Menu>
{_buttonList.slice(maxShowCount).map((item, index) =>
item.isDelete ? (
<Menu.Item key={index}>
<Popconfirm title={item.btnTxt || '确认删除?'}
onConfirm={item.onClick}>
<Button
loading={item.loading}
icon={item.icon}
type={item.type || 'link'}
className={styles.menuBtn}
>
{item.title}
</Button>
</Popconfirm>
</Menu.Item>
) : (
<Menu.Item key={index}>
<Button
loading={item.loading}
icon={item.icon}
type={item.type || 'link'}
href={item.href}
onClick={item.onClick}
title={item.altTitle}
className={styles.menuBtn}
>
{item.title}
</Button>
</Menu.Item>
)
)}
</Menu>
);
return (
<div
style={{
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
marginRight: 24,
marginBottom: 24,
...style,
}}
>
{_buttonList.map((item, index) => {
if (index < maxShowCount) {
if (item.isPopconfirm)
return (
<Popconfirm title={item.popTitle} key={index}
onConfirm={item.onClick}>
<Button
style={{ marginLeft: 8 }}
loading={item.loading}
icon={item.icon}
type={item.type}
>
{item.title}
</Button>
</Popconfirm>
);
return item.isDelete ? (
<Popconfirm title={item.btnTxt || '确认删除?'} key={index}
onConfirm={item.onClick}>
<Button
style={{ marginLeft: 8 }}
loading={item.loading}
icon={item.icon}
type={item.type}
>
{item.title}
</Button>
</Popconfirm>
) : (
<Button
style={{ marginLeft: 8 }}
key={index}
loading={item.loading}
icon={item.icon}
type={item.type}
href={item.href}
onClick={item.onClick}
title={item.altTitle}
>
{item.title}
</Button>
);
}
if (index === maxShowCount) {
return (
<Dropdown key={index} overlay={menu} placement="bottomCenter">
<Button style={{ marginLeft: 8 }}>更多操作</Button>
</Dropdown>
);
}
return '';
})}
</div>
);
}
}
export default ButtonGroup;数据演示
需要定义一个数据这边父子组件的一个传值 叫做buttonList
此时需要定义一个超过3的一个数组
<ButtonGroup buttonList={aloudList} maxShowCount={3}></ButtonGroup>功能要点 1
const aloudList = [
{
title: '我是小红',
type: 'primary',
hide: true,
},
{
title: '我是小明',
type: 'primary',
hide: false,
},
{
title: '我是小花',
type: 'primary',
hide: false,
isPopconfirm:true,
popTitle:"我是小花，你好呀",
onClick: () => {
this.handleXiaoHua()
}
},
{
title: '我是小瓜',
type: 'primary',
hide: false,
},
{
title: '我是小刚',
type: 'primary',
hide: false,
isDelete:true,
btnTxt:"我是小刚 删除我吗",
onClick: () => {
this.handleXiaoGang()
}
},
{
title: '我是小猪',
type: 'primary',
hide: false,
},
];1可以动态的控制按钮的显隐 超过maxShowCount的部分会展示为更多操作
演示效果
此时我是小明/我是小红/我是小花的按钮会被显示出来 我们看一下演示的效果
超过maxShowcount大于三的部分会显示为更多操作可以展开
功能要点2
2按钮的样式可以完全根据ant design的button属性来 都是父子组件进行传值 则改变一下数据格式 这边改变了一下button的type
const aloudList = [
{
title: '我是小红',
type: 'primary',
hide: true,
},
{
title: '我是小明',
type: 'primary',
hide: false,
},
{
title: '我是小花',
type: 'primary',
hide: false,
isPopconfirm:true,
popTitle:"我是小花，你好呀",
onClick: () => {
this.handleXiaoHua()
}
},
{
title: '我是小瓜',
type: 'link',
hide: false,
},
{
title: '我是小刚',
type: 'primary',
hide: false,
isDelete:true,
btnTxt:"我是小刚 删除我吗",
onClick: () => {
this.handleXiaoGang()
}
},
{
title: '我是小猪',
type: 'primary',
hide: false,
},
];演示效果
功能要点3
3可以动态的控制点击按钮的一个弹出提示 isDelete和isPopconfirm
const aloudList = [
{
title: '我是小红',
type: 'primary',
hide: true,
},
{
title: '我是小明',
type: 'primary',
hide: false,
},
{
title: '我是小花',
type: 'primary',
hide: false,
isPopconfirm:true,
popTitle:"我是小花，你好呀",
onClick: () => {
this.handleXiaoHua()
}
},
{
title: '我是小瓜',
type: 'link',
hide: false,
},
{
title: '我是小刚',
type: 'primary',
hide: false,
isDelete:true,
btnTxt:"我是小刚 删除我吗",
onClick: () => {
this.handleXiaoGang()
}
},
{
title: '我是小猪',
type: 'primary',
hide: false,
},
];演示结果
总结
在过往的岁月中,我遇到了形形色色的人和事情。有的人坚持，有的人放弃。 有的人逆袭，有的人失败。最好的种树是十年前，其次是现在。很高兴遇到你, 愿你的人生多姿多彩，幸福绵绵，好事连连
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码