javascript - 如何在 React/Native 中有条件地返回组件？

Question

我使用了一个工具从 .svg 文件创建 React-native 组件。它运行良好，我可以使用这种方式加载它们。

但是，我如何有条件地加载它们？

我导入了一些公司 Logo ，如下所示:

import Tesla from '../../static/brandlogos/svg/Tesla'
import Amazon from '../../static/brandlogos/svg/Amazon'
import Google from '../../static/brandlogos/svg/Google'
import Facebook from '../../static/brandlogos/svg/Facebook'
import Apple from '../../static/brandlogos/svg/Apple'

事实上，如果我这样调用该组件，它就会起作用:

<Amazon />

但是，我希望(当然)根据该组件接收到的 props 有条件地加载该组件。因此，我创建了一个函数:

 renderLogo (brandName) {
    const Logos = {
        Amazon,
        Facebook,
        Tesla,
        Google,
        Apple
    };

    if (Logos[brandName]) {
        return <Amazon /> // This works!
    }
    if (Logos[brandName]) {
        return Logos[brandName] // This doesn't!
    }
    if (Logos[brandName]) {
        return Logos.Amazon // This also doesn't!
    }
}

但是，我根本不知道如何创建 map 或数组来循环并渲染特定组件。如果我直接返回组件，当然它可以工作。

但是如何将每个“ Logo ”保存在数组或 map 中，并有条件地加载+仅返回此 Logo ？

当然，我可以对所有内容进行硬编码，但这会很糟糕。

Answer 1

简单地这样做

if (Logos[brandName]) {
   // Keep in mind the first letter should be capital (i.e. "C" in this case)
   let Comp = Logos[brandName]
   return <Comp />
}