React中如何通过单个prop创建字典实现多值变更？

问题背景 #

现有如下TypeScript组件，需要为dog/cat/bunny三种类型分别配置专属视觉样式（背景色、文字色等）及对应的API调用逻辑：

export default function APIListThingy({
  title = "List Component",
  type = "dog",
}: {
  title?: string;
  type: "dog" | "cat" | "bunny";
}) {
    
}

已尝试通过对象映射方案实现样式配置（如下代码），现寻求更高效的实现方式：

const variables = {
    dog: {
      bg: "#333",
      icon: "dog-outline",
    },
    cat : {
      bg: "#444",
      icon: "cat-outline",
    },
    bunny : {
      bg: "#555",
      icon: "bunny-outline",
    },
  };

最优实现方案：增强型集中配置对象 #

你当前的对象映射思路已经是高效方案的基础，只需将API调用逻辑也整合到配置对象中，并添加TypeScript类型约束，就能实现集中式、类型安全、易维护的最优解。

1. 定义类型与配置对象 #

先统一配置所有类型的样式和API逻辑，并通过TypeScript确保类型合规：

// 定义单个类型的配置结构
type TypeConfig = {
  bg: string;
  textColor: string;
  icon: string;
  fetchData: () => Promise<any>; // 对应类型的API调用函数
};

// 集中管理所有类型的配置
const typeConfigs: Record<"dog" | "cat" | "bunny", TypeConfig> = {
  dog: {
    bg: "#333",
    textColor: "#ffffff",
    icon: "dog-outline",
    fetchData: async () => {
      // dog专属API逻辑
      const response = await fetch("/api/dogs");
      return response.json();
    },
  },
  cat: {
    bg: "#444",
    textColor: "#f5f5f5",
    icon: "cat-outline",
    fetchData: async () => {
      const response = await fetch("/api/cats");
      return response.json();
    },
  },
  bunny: {
    bg: "#555",
    textColor: "#e0e0e0",
    icon: "bunny-outline",
    fetchData: async () => {
      const response = await fetch("/api/bunnies");
      return response.json();
    },
  },
};

2. 组件内使用配置 #

在组件中直接通过type字段获取对应配置，无需冗余判断：

export default function APIListThingy({
  title = "List Component",
  type = "dog",
}: {
  title?: string;
  type: "dog" | "cat" | "bunny";
}) {
  // 解构当前类型的所有配置
  const { bg, textColor, icon, fetchData } = typeConfigs[type];

  // 调用API的示例函数
  const loadListData = async () => {
    try {
      const data = await fetchData();
      // 处理获取到的数据
      console.log(`${type} data loaded:`, data);
    } catch (error) {
      console.error(`Failed to load ${type} data:`, error);
    }
  };

  return (
    <div style={{ backgroundColor: bg, color: textColor, padding: "1rem" }}>
      <h2>{title}</h2>
      <span className={`icon-${icon}`} aria-label={`${type} icon`}></span>
      <button onClick={loadListData}>加载{type}数据</button>
      {/* 渲染列表内容 */}
    </div>
  );
}

方案优势 #

• 集中维护：所有类型相关的样式和逻辑都存放在一个配置对象中，新增或修改类型时只需修改该对象，无需改动组件核心代码。
• 类型安全：通过TypeConfig和Record类型约束，确保每个类型的配置属性完整、类型正确，避免运行时错误。
• 性能高效：对象属性访问是O(1)操作，比if/else或switch判断更高效，类型数量越多优势越明显。
• 扩展性强：后续新增类型（如bird），只需在配置对象中添加对应条目即可，组件无需修改，符合开闭原则。

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