如何在React/React Native中用字符串选择组件而非传递Props？

核心思路是用键值对对象映射替代Array.find()，因为对象的属性访问是O(1)时间复杂度，比遍历数组的O(n)高效得多，代码也更简洁。下面是两种常见的落地方案：

方案一：预定义图标映射表（适合图标数量适中的场景） #

先把所有图标对应的SVG数据（路径或完整组件）整理成一个对象，键就是你要传的name字符串，值是图标内容：

// 图标映射表：键为name参数，值为SVG路径或组件
const iconMap = {
  "md-checkmark-circle": {
    path: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
  },
  "md-heart": {
    path: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
  }
};

// 图标组件实现
const Ionicons = ({ name, size = 24, color = "black" }) => {
  // 直接通过name从映射表取数据，一步到位
  const iconData = iconMap[name];
  
  // 处理找不到图标的情况：返回默认图标或空
  if (!iconData) {
    return <svg width={size} height={size} viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" /></svg>;
  }

  return (
    <svg
      width={size}
      height={size}
      fill={color}
      viewBox="0 0 24 24"
    >
      <path d={iconData.path} />
    </svg>
  );
};

使用时直接传name即可：

<Ionicons name="md-checkmark-circle" size={32} color="green" />

方案二：动态导入图标（适合大量图标的性能优化场景） #

如果图标数量极多，全量打包会增大体积，可以用动态导入结合映射表，用到哪个图标才加载哪个：

// 图标导入映射表：键为name，值为动态导入函数
const iconImportMap = {
  "md-checkmark-circle": () => import("./icons/md-checkmark-circle.svg"),
  "md-heart": () => import("./icons/md-heart.svg")
};

const Ionicons = ({ name, size = 24, color = "black" }) => {
  const [Icon, setIcon] = useState(null);

  useEffect(() => {
    const importFn = iconImportMap[name];
    if (importFn) {
      // 动态加载对应SVG组件（需配置svgr等工具将SVG转为React组件）
      importFn().then(module => setIcon(module.default));
    }
  }, [name]);

  if (!Icon) {
    return <div style={{width: size, height: size}}>加载中...</div>;
  }

  return <Icon width={size} height={size} fill={color} />;
};

为什么比Array.find()好？ #

• 性能：对象哈希查找是O(1)，不管图标数量多少，访问速度一致；Array.find()是遍历数组，图标越多越慢。
• 代码简洁：直接通过iconMap[name]取值，无需写遍历逻辑。
• 可维护性：映射表结构清晰，新增/删除图标只需修改对象，不用动组件逻辑。

额外优化点：

• 用TypeScript的话，可以给name定义联合类型，比如type IconName = "md-checkmark-circle" | "md-heart"，避免传错值。
• 统一图标命名规范（比如前缀区分风格），减少命名冲突。

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