从 Immutable.js 地图动态渲染组件

Dynamically render components from a Immutable.js map

为了管理我的不可变 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 参数并尝试在读取时动态渲染元素:

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”。没有组件被渲染:-(

我应该得到类似(return 来自 Filter1 和 Filter2 组件的值):

<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

使用map函数代替forEach:

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

Map 用于从先前的列表创建一个新列表,将每个元素转换为由提供的函数 returned 的元素。另一方面,forEach 没有 return 值,因此不会呈现任何内容。