React中如何将多个参数作为单个对象传入函数？

1. 定义对象的类型（TypeScript 场景） #

先把需要整合的参数类型封装成一个接口，明确每个属性的类型：

import React from 'react';
// 假设BankAsset是你项目中已定义的类型
interface ActionStateProps {
  setAction: (value: React.SetStateAction<string>) => void;
  setActionRow: ((value: React.SetStateAction<{}>) => void) & ((arg0: BankAsset) => void);
  setwithdrawalThreshold: (value: React.SetStateAction<boolean>) => void;
  setwithdrawalThresholdData: React.Dispatch<React.SetStateAction<{}>>;
  showThreshold: boolean;
}

如果是纯 JavaScript 场景，可跳过类型定义直接执行后续步骤。

2. 修改函数的参数列表 #

将原来分散的5个参数替换为上述定义的对象类型参数，保留其他不需要整合的参数：

function getBankEditActionColumn(
  actionState: ActionStateProps,
  worldReadyContext,
  legalCountryCode,
  tier,
  fptiData
) {
  // 可选：解构对象，方便后续直接使用属性
  const {
    setAction,
    setActionRow,
    setwithdrawalThreshold,
    setwithdrawalThresholdData,
    showThreshold
  } = actionState;

  // 原函数逻辑保持不变，访问这些参数时从actionState对象获取即可
}

3. 调用函数时传入整合后的对象 #

调用函数时，把需要整合的参数打包成一个对象传入，其余参数按原顺序传递：

// 假设这些变量都是已定义好的
getBankEditActionColumn(
  {
    setAction,
    setActionRow,
    setwithdrawalThreshold,
    setwithdrawalThresholdData,
    showThreshold
  },
  worldReadyContext,
  legalCountryCode,
  tier,
  fptiData
);

额外说明 #

这种方式的优势在于：

• 避免参数过多导致的传参顺序错误
• 函数参数结构更清晰，后续维护时能快速识别相关联的参数组
• 如需新增同组的参数，只需扩展对象类型和传入的对象即可，无需修改函数参数列表的长度

内容的提问来源于stack exchange，提问作者Prateek Sinha