我曾经遇到过同样的问题,但我的情况有些不同。我有一个包含不同对象的数组,这些对象需要动态图片。我已经在映射数组,但我需要根据名称将图像与该数组匹配。这有点hacky,但这是我处理它的方式。
首先,在我的父组件中,我创建了一个函数来渲染我的对象数组的组件。我将对象数据传递到名为“object”的prop中。
在我的情况下,我知道我的数据是什么,并且我需要将相应的图像与从外部api中提取数据的对象匹配。
renderObjects() {
return this.state.objects.map(object => (
<ObjectListDetail
key={object.id}
next
props={this.props}
object={object}
/>
));
}
在我的ObjectListDetail组件中,我创建了一个名为icons的变量,它是另一个对象数组。这一次,我创建了一个名为name的属性,它将与从父级传递给组件的对象匹配,然后有第二个键叫做source,在其中我提供了图像的路径。大致像这样。
var icons = [
{ name: "BTC", source: Images.btc },
{ name: "ETH", source: Images.eth },
{ name: "ETC", source: Images.etc },
{ name: "ZRX", source: Images.zrx },
{ name: "USDC", source: Images.usdc },
{ name: "LTC", source: Images.ltc },
{ name: "BCH", source: Images.bch },
{ name: "USD", source: Images.usd }
];
注意***我已经将所有的图片都放在一个单独的文件中,并在顶部导入了它们。
然后,我创建了一个名为imgSrc的变量,并过滤结果以匹配我传递给子组件的对象的名称。
var imgSrc = icons.filter(
icon => icon.name === props.wallet.name
)
我随后创建了一个图像组件,并在源需求中调用了过滤器的结果,并将其指向源。
<Image source={imgSrc[0].source} />
这就是我在应用程序中实现动态图像渲染的方法。
可能这不是最好的做法,而且我还是有点新手,但我很乐意接受任何批评。