从 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 值,因此不会呈现任何内容。
为了管理我的不可变 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 值,因此不会呈现任何内容。