我正在尝试找到一种更聪明的方法来遍历数组并生成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()}
)
}
我该如何实现这一点?我相信渲染只会被调用一次。
发布于 2018-12-07 04:42:55
return (
<View style={{ flexDirection: 'row' }}>
{card.map(c=>((<Image source={getCardIcon(c)} size={65} />))}
</View>
)
发布于 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>
)
}
https://stackoverflow.com/questions/53659303
复制相似问题