문자열 배열에서 반응 구성 요소의 동적 목록을 렌더링합니다.

Question

내 구성 요소는 렌더링되어야하는 일부 필터를 받침으로받는 필터입니다. 소품은 렌더링되지 않습니다하지만 :

<Filter key={i}/> 

코드가 여기에 있습니다 : https://www.webpackbin.com/bins/-KjI4MiSjlV69O_zaOCD

필터 구성 요소 : 필터의

import React, { PropTypes } from 'react' 
import Filter1 from './Filter1' 
import Filter2 from './Filter2' 


const Filters = ({ filters }) => (
    <div> 
    { filters.reverse().map((Filter, i) => 
     // React.createElement(Filter, { key: i}) does not work 
     // <p>{Filter}</p> // h 
     <Filter key={i}/> 

    )} 
    <p> This should be seen twice!</p> 
    <Filter1/> 
    <Filter2/> 
    </div> 
) 
Filters.propTypes = { 
    filters: PropTypes.arrayOf(PropTypes.string).isRequired 
} 

export default Filters 

하나 :

import React from 'react' 

function Filter1() { 
    return (
    <h1>This is filter1</h1> 
) 
} 

export default Filter1 

Answer 1

변경 Filters.js과 같이 :

import React, { PropTypes } from 'react' 
import Filter1 from './Filter1' 
import Filter2 from './Filter2' 

const filters = { 
    Filter1: Filter1, 
    Filter2: Filter2 
} 
const Filters = (props) => (
    <div> 
    { props.filters.reverse().map((filter, i) => { 
     const Filter = filters[filter]; 
     return <Filter key={i}/> 
     }) 
    } 
    <p> This should be seen twice!</p> 
    <Filter1/> 
    <Filter2/> 
    </div> 
) 
Filters.propTypes = { 
    filters: PropTypes.arrayOf(PropTypes.string).isRequired 
} 

export default Filters 

키 변경은 전달하려는 문자열과 일치하는 키가 들어있는 객체 filters을 사용하는 것입니다. 값은 렌더링하려는 구성 요소입니다.

Here 질문이 있나요