ループスルー流星反応成分

Question

メテオール1.4とリアクト私は、それぞれ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()はステートレス関数として渡されます。

そのスレッドによると、私の唯一の2つのオプションがあります。私が試した

1. がSession.get()

を経由して公開する機能にパラメータを渡すラッパーコンポーネント（ItemRow1.jsxとItemRow2.jsx）

を作成します2番、それはSession.getを何百回も読んでから、私のアプリケーションを停止させた。

1番は動作しますが、データの2番目の行にページングするだけでは信じられないくらい繰り返しているようです...これを行うには良い方法はありませんか？私が正しくあなたが何をしようとして理解していれば、それを実現する最も簡単な方法は、createContainerで行1および2のための項目の個別の配列を作成することです

Answer 1

：

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

もちろんの

：あなたがこれを行うことができます renderItems方法で今

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

：propTypesを同様に変更する必要がありますあなただけの2行（と明らかに行の任意の他の数をサポートする必要はありません）を持っているので、あなただけのデータベースからの12の項目を取得し、このようなsliceとrenderItemsでそれらをレンダリングすることができ代わり

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

、：

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

実際のコードに応じて、どのようにクリーナーなので、好きなものを選んでください。