通过流星React组件循环

Question

在Meteor 1.4中使用React我想做一个渲染组件的嵌套循环，每行6个项目的2行。

Row 1 
[unique_item] [unique_item] [unique_item] ... 
Row 2 
[unique_item] [unique_item] [unique_item] ... 

我如何通过状态到createContainer功能，这样我可以增加计数器进行分页的结果？

下面的代码：

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
import { createContainer } from 'meteor/react-meteor-data'; 

import { Items } from '../api/items.js'; 
import Item from './Item.jsx'; 
import '../../client/stylesheets/main.scss'; 

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     skipCount : 0 
    }; 
    } 

    renderItemRows(i) { 
    return ( 
     <div className="container-fluid"> 
      <div className="row"> 
      { this.renderItems(i) } 
      </div> 
     </div> 
    ); 
    } 


    renderItems(i) { 
    // i here has the right value...how do I pass into createContainer? 
    return this.props.items.map((item) => (
     <Item key={item._id} item={item} /> 
    )); 
    } 

    render() { 
    let rows = []; 
    for (let i=0;i<2;i++) { 
     rows.push(this.renderItemRows(i)); 
    } 
    return (<div>{rows}</div>); 
    } 
} 


App.propTypes = { 
    items: PropTypes.array.isRequired, 
    skipCount: PropTypes.number, 
}; 

export default createContainer(() => { 
    // Hardcoded to 50 just to make sure the data pagination works 
    const skipCount = 50; 
    Meteor.subscribe('items', skipCount); 
    return { 
    items: Items.find({}, { sort: { item : 1 }, limit : 6 }).fetch(), 
    }; 
}, App); 

通过this thread对流星论坛看完后，createContainer()作为一个无状态的函数传递所以没有办法像这样的信息传递给它。

根据这一线索，我只有两个选项：

1. 通过Session.get()

创建一个包装组件（ItemRow1.jsx和ItemRow2.jsx）

传递参数到发布功能我试着第二，但它开始阅读Session.get每秒数百次，并使我的应用程序停止。

第1号将工作，但似乎令人难以置信的重复只是通过第二行数据分页......有没有更好的方法来做到这一点？

Answer 1

如果我正确理解你想要做什么，最简单的方式来实现，这将是在createContainer创建和物品行1 2的独立阵列：

return { 
    items1: Items.find({}, { sort: { item : 1 }, limit : 6 }).fetch(), 
    items2: Items.find({}, { sort: { item : 1 }, skip: 6, limit : 6 }).fetch(), 
}; 

当然你需要改变propTypes还有：

items1: PropTypes.array.isRequired, 
items2: PropTypes.array.isRequired, 

现在在renderItems方法，你可以这样做：

return this.props[`items${i+1}`].map((item) => (
    <Item key={item._id} item={item} /> 
)); 

或者，因为你只需要两行（显然没有必要支持的任何行的其他数），你可以只得到12个项目从数据库中，然后用slice这样使他们在renderItems：

const items = (i === 0) ? this.props.items.slice(0, 7) : this.props.items.slice(7); 
return items.map((item) => (
    <Item key={item._id} item={item} /> 
)); 

这取决于你的实际代码哪种方式更清洁，所以随你喜欢。