使用循环并渲染多个jsx项，稍后返回进行渲染

Question

我正试图找到一种更聪明的方法来循环遍历数组并生成jsx并返回到渲染函数：

renderCardImages = () => {
const cards = [
'Visa',
'MasterCard',
'AmericanExpress',
'Discover',
'JCB',
]
return (
<View style={{ flexDirection: 'row' }}>
<Image source={getCardIcon('Visa')} size={65} />
<Image source={getCardIcon('MasterCard')} size={65} />
<Image source={getCardIcon('AmericanExpress')} size={65} />
<Image source={getCardIcon('Discover')} size={65} />
<Image source={getCardIcon('JCB')} size={65} />
</View>
)
}
render () {
return (
{renderCardImages()}
)
}

我该如何做到这一点？我相信render只调用一次。

Answer 1

return (
<View style={{ flexDirection: 'row' }}>
{card.map(c=>((<Image source={getCardIcon(c)} size={65} />))}
</View>
)

Answer 2

如果是静态的，则将卡片列表移动到组件之外，如果是动态的，则从道具中获取。在render函数中使用Array.map()来迭代列表，并渲染卡片：

render () {
return (
<View style={{ flexDirection: 'row' }}>
{cars.map(card => (
<Image source={getCardIcon(card)} size={65} />        
))}
</View>
)
}