从字符串数组渲染反应组件的动态列表

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是编辑好的webpackbin

从字符串数组渲染反应组件的动态列表

Render dynamic list of react components from array of strings

reactjs

react-jsx