React Native中如何通过字符串选择图标而非传入Props

我拥有<A/>、<B/>、<C/>这几个SVG图标，希望在<MyButton>组件中使用它们。当前用法如下：

MyButton.js

function MyButton(props) {
  return (
    <TouchableOpacity>
      {props.icon}
      <Text>{props.title}</Text>
    </TouchableOpacity>
  );
}

App.js

import A from "./A";
import B from "./B";
import C from "./C";

function App() {
      return (
        <MyButton icon={<A/>} title={'Example'} />
      );
    }

我希望能够通过字符串选择图标，而非直接传入组件作为Props，期望用法如下：

期望的App.js写法

function App() {
      return (
        <MyButton icon={"a"} title={'Example'} />
      );
    }

请问该如何实现？

可以通过创建图标映射表实现字符串到组件的转换，具体步骤如下：

1. 在MyButton组件中创建图标映射 #

先把所有需要用到的SVG组件导入到MyButton里，再创建一个键值对对象，键是你要使用的字符串标识，值对应SVG组件：

// MyButton.js
import A from "./A";
import B from "./B";
import C from "./C";

// 图标映射表：键为字符串标识，值为对应SVG组件
const IconMap = {
  a: A,
  b: B,
  c: C
};

function MyButton(props) {
  // 根据传入的icon字符串获取对应组件，toLowerCase兼容大小写输入
  const IconComponent = IconMap[props.icon?.toLowerCase()];
  
  return (
    <TouchableOpacity>
      {/* 匹配到组件就渲染，未匹配则不显示图标 */}
      {IconComponent && <IconComponent />}
      <Text>{props.title}</Text>
    </TouchableOpacity>
  );
}

2. 可选：添加默认图标兜底 #

如果传入的字符串没有匹配到任何图标，可以设置默认图标，避免按钮出现空白：

// 先导入默认图标
import DefaultIcon from "./DefaultIcon";

const IconMap = {
  a: A,
  b: B,
  c: C,
  default: DefaultIcon
};

function MyButton(props) {
  // 未匹配到则使用默认图标
  const IconComponent = IconMap[props.icon?.toLowerCase()] || IconMap.default;
  
  return (
    <TouchableOpacity>
      <IconComponent />
      <Text>{props.title}</Text>
    </TouchableOpacity>
  );
}

3. 最终使用方式 #

现在就可以按照期望的方式传字符串选择图标：

// App.js
import MyButton from "./MyButton";

function App() {
  return (
    <>
      <MyButton icon={"a"} title={'带A图标的按钮'} />
      <MyButton icon={"B"} title={'带B图标的按钮'} />
      <MyButton icon={"c"} title={'带C图标的按钮'} />
    </>
  );
}

补充说明 #

• 映射表的键可以自定义（比如"iconA"、"iconB"），只要保持传入的字符串和键一致即可
• 如果图标数量较多，建议把映射表单独抽成iconMap.js文件，方便统一维护和跨组件复用

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