Immutable.jsマップからコンポーネントを動的にレンダリングします

Question

私の不変redux状態を管理するために、不変状態を読み込み、それに基づいてコンポーネントをレンダリングする必要があります。

私の実際のコードはかなり長いですが、それはこのようなものになる可能性がまとめたwebpackbin

からこのコードを参照してください：

import React from 'react' 
import {render} from 'react-dom' 
import {fromJS} from 'immutable' 
import Filters from './Filters' 


const data = fromJS({ 
    Filter1: ['english', 'french', 'spanish'], 
    Filter2: ['small', 'big'] 
}) 

render(<Filters filterMap={data} />, document.querySelector('#app')) 

私はすべてのフィルタをレンダリングする必要があるので、私はfilterMapパラメータを読み、私はそれを読むようdinamically要素をレンダリングしよう：私は唯一の番号を取得しかし

import React, { PropTypes } from 'react' 
import {fromJS, map} from 'immutable' 
import Filter1 from './Filter1' 
import Filter2 from './Filter2' 

const filters = { Filter1, Filter2 } 

const Filter = ({ filterMap }) => (
    <div> 
    { filterMap.entrySeq().forEach((item) => { 
     const FilterElement = filters[item[0]] 
     console.log('item0: ' + item[0]) 
     console.log('item1:' + item[1]) 
     console.log (FilterElement) 
     return <FilterElement /> 
    }) 
    } 
    </div> 
) 

export default Filter 

「2」。

<h1>This is filter1</h1> 
<h1>This is filter2</h1> 

FILTER1とFILTER2コード：

import React from 'react' 

function Filter2() { 
    return (
    <h1>This is filter2</h1> 
) 
} 

export default Filter2 

Answer 1

代わりmap機能を使用しませコンポーネントは、私が（フィルタ1とフィルタ2のコンポーネントからの戻り値）のようなものを取得する必要

:-(レンダリングされなかっ取得しますforEach：

{ filterMap.entrySeq().forEach((item) => { 
// change to: 
{ filterMap.entrySeq().map((item) => { 

マップは前のリストから新しいリストを作成して、各要素を提供された関数が返す要素に変換します。一方、forEachには戻り値がないため、何も描画されません。