储蓄卡:去转账,买理财、查明细;
电子账户:转入、转出、查明细;
信用卡:查账单、去还款;
存折:查明细;
他行卡:他行卡转入、查明细
在前端不同卡的类型展示不同的按钮,怎么写一个方法在页面展示
在前端不同卡的类型展示不同的按钮,怎么写一个方法在页面展示
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
关注 引自免费微信小程序:皆我百晓生
为了实现这个功能,我们可以创建一个函数,该函数接收卡的类型作为参数,并根据类型返回相应的按钮列表。然后,在HTML模板中调用这个函数并渲染对应的按钮。这里我们使用JavaScript和React.js作为示例。
首先,定义一个函数
getButtonsByCardType
,它接受一个名为cardType
的参数:function getButtonsByCardType(cardType) { switch (cardType) { case '储蓄卡': return ['转账', '买理财', '查明细']; case '电子账户': return ['转入', '转出', '查明细']; case '信用卡': return ['查账单', '去还款']; case '存折': return ['查明细']; case '他行卡': return ['他行卡转入', '查明细']; default: return []; } }
接下来,在React组件中使用这个函数,例如在一个名为
CardActions
的组件中:import React from 'react'; const CardActions = ({ cardType }) => { const buttons = getButtonsByCardType(cardType); return ( <div className="card-actions"> {buttons.map((button, index) => ( <button key={index} className="action-button"> {button} </button> ))} </div> ); }; export default CardActions;
在父组件中,根据用户选择的卡类型,将
cardType
作为属性传递给CardActions
组件:import React from 'react'; import CardActions from './CardActions'; const App = () => { // 假设您从后端获取了用户当前的卡类型,这里是示例值 const currentCardType = '储蓄卡'; // 可能是'电子账户'、'信用卡'等 return ( <div className="app-container"> {/* 其他内容 */} <CardActions cardType={currentCardType} /> {/* 其他内容 */} </div> ); }; export default App;
这样,根据传入的卡类型,
CardActions
组件会动态地显示对应类型的按钮。注意,这只是一个基础示例,实际应用可能需要处理更多细节,比如样式、错误处理、状态管理等。本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 淘宝自动下单XPath自动点击插件无法点击特定<span>元素,如何解决?
- ¥15 曙光1620-g30服务器安装硬盘后 看不到硬盘
- ¥15 抖音直播广场scheme
- ¥15 为什么我明明有这个文件调试器还显示错误?
- ¥15 软件工程用例图的建立(相关搜索:软件工程用例图|画图)
- ¥15 如何在arcgis中导出拓扑关系表
- ¥15 处理数据集文本挖掘代码
- ¥15 matlab2017
- ¥15 在vxWorks下TCP/IP编程,总是connect()报错,连接服务器失败: errno = 0x41
- ¥15 AnolisOs7.9如何安装 Qt_5.14.2的运行库