如何調用迴路中的組件

Question

我想在CategoryBox組件內調用類別產品 forEach循環內的組件。

我輸入：

- 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組件

Answer 1

你應該看看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 

Answer 2

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 }