從Immutable.js映射Dinamically呈現組件

爲了管理我的不可變redux狀態，我需要讀取Immutable狀態並基於它呈現組件。從Immutable.js映射Dinamically呈現組件

這個代碼我實際的代碼是很長，但總結它可能是這樣的：

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'。號成分得到呈現:-(

我應該得到這樣的事情（從過濾器1和過濾器2組件返回值）：

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

過濾器1和過濾器2的代碼：

import React from 'react' 

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

export default Filter2

來源

2017-05-08 user2670996

使用map函數，而不是forEach：

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

地圖用於從前面的列表中創建一個新列表，將每個元素轉換爲由提供的函數返回的元素。另一方面，forEach沒有返回值，因此沒有任何呈現。

來源

2017-05-08 17:07:16 Herku

從Immutable.js映射Dinamically呈現組件

回答

相關問題