Schleife durch Meteor React Komponenten

Question

In Meteor 1.4 mit React Ich möchte eine verschachtelte Schleife von Rendering-Komponenten, 2 Reihen mit je 6 Elementen.

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

Wie kann ich Zustand in die createContainer Funktion übergeben, so dass ich den Zähler um die Ergebnisse Paginieren erhöhen kann?

Hier ist der Code:

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); 

Nachdem auf den Meteor-Foren durch this thread Lesen, createContainer() als staatenlos Funktion übergeben wird, so gibt es keine Möglichkeit gibt, Informationen wie diese zu übergeben.

Nach diesem Thread, meine nur zwei Optionen:

1. eine Wrapper-Komponente erstellen (ItemRow1.jsx und ItemRow2.jsx)
2. einen Parameter an die Funktion veröffentlichen Passing über Session.get()

Ich habe versucht, Nr. 2, aber es fing an, Session.get Hunderte Male pro Sekunde zu lesen und meine Anwendung zum Stillstand zu bringen.

Nr. 1 wird funktionieren, scheint aber unglaublich repetitiv zu sein, nur um durch eine zweite Reihe von Daten paginieren ... gibt es keinen besseren Weg, dies zu tun?

Answer 1

Wenn ich richtig verstehe, was Sie versuchen zu tun, um die einfachste Art und Weise erreicht werden, dass separate Arrays von Elementen für die Zeilen 1 und 2 in createContainer zu schaffen wäre:

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

Sie natürlich müssen die propTypes auch verändern:

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

Jetzt im renderItems Methode, dies tun:

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

Alternativ kann, da man nur zwei Reihen (und anscheinend keine Notwendigkeit, jede andere Anzahl von Zeilen zu unterstützen), könnten Sie 12 Elemente aus der Datenbank nur erhalten, und dann die sie mit slice wie diesem in renderItems machen:

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} /> 
)); 

Es hängt von Ihrem tatsächlichen Code ab, welcher Weg sauberer ist, also gehen Sie mit, was auch immer Sie bevorzugen.