能否将组件标签存入变量，实现基于type属性的复用组件图标切换？

问题根源 #

你这套写法跑不起来，本质是没摸准React动态组件的语法规则，踩了两个常见坑：

• JSX根本不支持<{tag}>这种动态标签写法，代码走到编译环节就会直接报错
• 你存在tag变量里的只是普通字符串（比如'Entypo'），不是从图标库导入的组件本身。就算你把写法改成<tag name='xxx' />，React也会把它识别成原生DOM的<tag>标签，根本不会匹配到你要的图标组件。

可落地的实现步骤 #

1. 提前导入对应图标组件实例 #

别上来就存字符串名，先从图标包把实体组件引进来，不管是React Native用的@expo/vector-icons，还是Web端的@ant-design/icons，导入逻辑完全一致：

import { Entypo, AntDesign } from '@expo/vector-icons';

2. 建立类型到组件的映射表 #

把你要通过type属性传的标识值，和实际的组件实例做一一绑定，不要绑定字符串：

// 键就是你要通过type传的标识，值就是前面导入的组件本身
const iconTypeMap = {
  home: Entypo,
  account: AntDesign,
  // 以后要加其他图标库，直接往这里面补键值对就行，不用改核心渲染逻辑
}

3. 取出匹配组件做渲染 #

从映射表中取出对应的组件，赋值给大驼峰命名的变量——这是React识别自定义组件的基本规则——同时做好异常兜底，避免传错值导致页面白屏：

// 没匹配到对应类型的时候，用AntDesign当默认组件
const RenderIcon = iconTypeMap[type] || AntDesign;

// 所有图标支持的props（name、size、color之类的）都可以正常透传
<RenderIcon name={someName} size={24} color="#333" />

实用注意点 #

• 映射表最好写到组件外部，别写在组件函数内部，不然每次组件重渲染都会重新生成一遍映射对象，平白增加性能消耗
• 可以给type属性加简单的类型校验，限制传入的值只能是映射表里存在的键，从流程上减少运行时的渲染错误

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