Reactjs 从Immutable.js映射动态渲染组件

为了管理我的不可变redux状态，我需要读取一个不可变状态并基于它呈现组件

从中查看此代码

我的实际代码相当长，但概括起来可能是这样的：

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

从“React”导入React
从'react dom'导入{render}
从“不可变”导入{fromJS}
从“./Filters”导入筛选器
const data=fromJS({
过滤器1:[“英语”、“法语”、“西班牙语”]，
过滤器2:[‘小’、‘大’]
})
render（，document.querySelector（'#app'））

我需要渲染所有过滤器，因此我读取filterMap参数，并尝试在读取时动态渲染元素：

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

import React，{PropTypes}来自“React”
从“不可变”导入{fromJS，map}
从“/Filter1”导入筛选器1
从“/Filter2”导入筛选器2
常量过滤器={Filter1，Filter2}
常量筛选器=（{filterMap}）=>(
{filterMap.entrySeq（）.forEach（（项）=>{
常量FilterElement=筛选器[项[0]]
console.log（'item0:'+项[0]）
console.log（'item1:'+项[1]）
console.log（FilterElement）
返回
})
}
)
导出默认筛选器

然而，我只得到一个数字“2”。未渲染任何组件：-(

我应该得到如下结果（Filter1和Filter2组件返回值）：

这是过滤器1
这是过滤器2

过滤器1和过滤器2代码：

import React from 'react'

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

export default Filter2

从“React”导入React
函数过滤器2（）{
返回(
这是过滤器2
)
}
导出默认过滤器2

使用

map

功能代替

forEach

：

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

Map用于从以前的列表创建新列表，将每个元素转换为所提供函数返回的元素。

forEach

没有返回值，因此不会呈现任何内容

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