通過流星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} /> 
)); 

這取決於你的實際代碼哪種方式更清潔，所以隨你喜歡。