如何在循环内调用组件

Question

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

我的输入 ：

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

产品类别：

@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组件

Answer 1

Array.prototype.forEach()不返回任何内容 。 您必须改为使用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 }

Answer 2

您应该研究coffeescript的循环和理解力 。 它们比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