在前端不同卡的类型展示不同的按钮，怎么写一个方法在页面展示

Question

储蓄卡：去转账，买理财、查明细；
电子账户：转入、转出、查明细；
信用卡：查账单、去还款；
存折：查明细；
他行卡：他行卡转入、查明细
在前端不同卡的类型展示不同的按钮，怎么写一个方法在页面展示

Answer 1

引自免费微信小程序：皆我百晓生

为了实现这个功能，我们可以创建一个函数，该函数接收卡的类型作为参数，并根据类型返回相应的按钮列表。然后，在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组件会动态地显示对应类型的按钮。注意，这只是一个基础示例，实际应用可能需要处理更多细节，比如样式、错误处理、状态管理等。