如何在循环中调用组件

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() 没有 return 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 }

Answer 2

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

例如：

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

如何在循环中调用组件

How can I call a component inside a loop

javascript

foreach

coffeescript

reactjs