如何在循環內調用組件

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