Question

我正在尝试找到一种更聪明的方法来遍历数组并生成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()}
    )
  }

我该如何实现？我相信render只调用一次。

Answer 1

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

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

Answer 2

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

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

2 个答案: