如何在循环内调用组件答案

【问题标题】：How can I call a component inside a loop如何在循环内调用组件
【发布时间】：2016-12-22 06:08:27
【问题描述】：

我想在 CategoryBox 组件的 forEach 循环内调用 CategoryProduct 组件。

我的输入：

- productos =  [ { header: 'car', src: 'picture.jpg', description: 'the car' } ]

CategoryProduct 组件：

@CategoryProduct = React.createClass
render: ->
 div
  className: 'CategoryProduct'
  div
    className: 'header'
    @props.header
  div
    className: 'picture'
    @props.src
  div
    className: 'description'
    @props.description

然后我尝试调用CategoryBox组件中的CategoryProduct组件：

@CategoryBox = React.createClass
 render: ->
  div
   className: 'CategoryBox'
   @props.productos.forEach (prod) ->
     React.createElement CategoryProduct, { header: prod.header, src: prod.src, description: prod.description }

但是输出什么都不是。我在循环中做了一个控制台日志，进入没有问题，但它没有进入 CategoryProduct 组件

【问题讨论】：

标签： javascript reactjs foreach coffeescript

【解决方案1】：

Array.prototype.forEach() 不返回 anything。您必须改用Array.prototype.map()。

所以你的代码应该是这样的

@CategoryBox = React.createClass
 render: ->
  div
   className: 'CategoryBox'
   @props.productos.map(prod) ->
     React.createElement CategoryProduct, { header: prod.header, src: prod.src, description: prod.description }

【讨论】：

【解决方案2】：

您应该查看coffeescript 的loops and comprehensions。它们比 JS 的要好得多，并且由于 coffeescripts 隐式返回，循环将返回一个数组，其中包含循环内最后一行的值。

例如：

a = [1,2,3,4,5,6]
b = for item in a 
  z = item * 2
  z + 1

那么b 将是[3, 5, 7, 9, 11, 13]

所以你的代码会这样写：

@CategoryBox = React.createClass
  render: ->
    div
      className: 'CategoryBox'
      for prod in @props.productos
       React.createElement CategoryProduct, prod

【讨论】：