如何调用回路中的组件

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 }