使用循环并稍后渲染多个jsx项目返回渲染[重复]答案

【问题标题】：Use a loop and render multiple jsx items later return to render [duplicate]使用循环并稍后渲染多个jsx项目返回渲染[重复]
【发布时间】：2019-05-08 14:47:33
【问题描述】：

我正在尝试找到一种更智能的方式来循环遍历数组并生成 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()}
    )
  }

我如何实现这一目标？我相信渲染只被调用一次。

【问题讨论】：

标签： android ios reactjs react-native ecmascript-6

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：