Question

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

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

我已经导入了一些公司徽标：

resizeFrame(newWidth: 430, newHeight: 310)

实际上，如果我这样调用组件，它就可以工作：

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 />

但是，我根本无法弄清楚如何创建要循环的地图或数组，并渲染特定组件。如果我直接返回组件，当然它可以工作。

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

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

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 />
}

Answer 2

我认为，this post on Dynamic Component Names with JSX很好地回答了你的问题：

components = {
    foo: FooComponent,
    bar: BarComponent
};

render() {
   const TagName = this.components[this.props.tag || 'foo'];
   return <TagName />
}

在这个例子中，你有来自prop的标签 - 许多组件最典型的情况。

如何在React / Native中有条件地返回一个组件？

2 个答案: