使用循环并呈现多个jsx项，稍后返回以呈现
使用循环并呈现多个jsx项，稍后返回以呈现
提问于 2018-12-07 04:37:31
我正在尝试找到一种更聪明的方法来遍历数组并生成jsx并返回到render函数：
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()}
)
}我该如何实现这一点？我相信渲染只会被调用一次。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-07 04:42:55
return (
<View style={{ flexDirection: 'row' }}>
{card.map(c=>((<Image source={getCardIcon(c)} size={65} />))}
</View>
)Stack Overflow用户
发布于 2018-12-07 04:42:36
如果是静态的，则将卡片列表移到组件外部；如果是动态的，则从props获取。在render函数中使用Array.map()迭代列表，并呈现卡片：
render () {
return (
<View style={{ flexDirection: 'row' }}>
{cars.map(card => (
<Image source={getCardIcon(card)} size={65} />
))}
</View>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53659303
复制相关文章
相似问题