React Native中如何条件渲染SVG转换的品牌Logo组件？

嘿，我之前也踩过这个坑！你用对象存储组件的思路完全没问题，之前无效大概率是因为没有把获取到的组件实例化，或者键名和传入的brandName不匹配。下面给你一套可行的方案：

1. 先创建组件映射对象 #

首先把你导入的所有Logo组件，按「品牌名-组件」的对应关系存到一个对象里，注意键名要和你后续传入的brandName保持一致（可以统一大小写避免坑）：

// 导入所有转好的Logo组件
import Tesla from './path-to/Tesla';
import Amazon from './path-to/Amazon';
import Google from './path-to/Google';
import Facebook from './path-to/Facebook';
import Apple from './path-to/Apple';

// 创建组件映射表，键名可以根据你的props需求调整，比如小写/大写/原品牌名
const LogoMap = {
  tesla: Tesla,
  amazon: Amazon,
  google: Google,
  facebook: Facebook,
  apple: Apple,
  // 后续加新品牌直接在这里加就行，不用改渲染逻辑
};

2. 编写动态渲染组件 #

接下来写一个接收brandName props的组件，通过映射表拿到对应组件，然后必须以组件的形式渲染（加<>）：

const DynamicBrandLogo = ({ brandName, ...restProps }) => {
  // 统一处理大小写，避免传入"Amazon"和"amazon"找不到组件的问题
  const normalizedBrand = brandName.toLowerCase();
  // 从映射表中获取对应的组件
  const TargetLogo = LogoMap[normalizedBrand];

  // 处理不存在的品牌名，返回null或者默认占位组件
  if (!TargetLogo) {
    return null; // 或者 return <DefaultLogo />;
  }

  // 把组件实例化渲染，还可以传递额外props（比如颜色、大小）
  return <TargetLogo {...restProps} />;
};

3. 使用方式 #

现在你只需要传入对应的品牌名就能自动渲染啦：

// 渲染Amazon的Logo
<DynamicBrandLogo brandName="Amazon" color="#FF9900" size={32} />
// 渲染Tesla的Logo
<DynamicBrandLogo brandName="tesla" color="#E82127" />

为什么之前的方式无效？ #

你之前直接返回Logos[brandName]或者Logos.Amazon，本质上只是返回了组件的引用，而React需要的是组件的实例，也就是必须写成<Logos.Amazon />这种带标签的形式才会渲染。

另外还要注意键名和brandName的匹配问题，如果传入的是大写的"Amazon"，但映射表的键是小写的"amazon"，就会找不到组件，所以统一规范化大小写很重要~

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