Immutable.js 맵에서 구성 요소를 동적으로 렌더링합니다.

불변의 redux 상태를 관리하려면, 변경 불가능 상태를 읽고이를 기반으로 구성 요소를 렌더링해야합니다.Immutable.js 맵에서 구성 요소를 동적으로 렌더링합니다.

내 실제 코드는 매우 긴 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'라는 숫자 만 얻습니다. 어떤 구성 요소는 내가 같은 (필터 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 맵에서 구성 요소를 동적으로 렌더링합니다.

답변

관련 문제