react元素的动态渲染

Question

我有一个组件数组

[
  {
    componentName: 'FieldHeader',
    props: {title:'bla bla},
    showOnDate: '01/01/2019'
  },
  {
    componentName: 'RadioButton',
    props: {},
    showOnDate: '01/01/2018'
  }
]

我正在尝试从这个数组中动态创建元素。

我有一个包含所有组件的数组。

我是这样想的：

for (var i=0; i < objects.length; i++) {
        <components[objects[i].componentName] {...props}>
}

但是做一些类似这样的事情：

<components['FieldHeader'] {...props}> 

引发编译错误。

有没有办法动态呈现像这样的react元素？

Answer 1

不能使用字符串类名实例化组件。

相反，尝试这样做：

const components = [
  {
    component: <FieldHeader {...props} >,
    props: {title:'bla bla},
    showOnDate: '01/01/2019'
  },
  {
    component: <RadioButton {...props} >,
    props: {},
    showOnDate: '01/01/2018'
  }
];

return components.map((c) => c.component);

Answer 2

尝试使用.map()或.forEach()。别忘了退回你的组件。

导入您的组件，例如：import FieldHeader from './components'

// your components array
var myArr = [
    {
        componentName: FieldHeader,
        props: {title:'bla bla},
        showOnDate: '01/01/2019'
    },
    {
        componentName: RadioButton,
        props: {},
        showOnDate: '01/01/2018'
    }
  ]

现在，在render函数中：

render(){
    return(
        <div>
            {
                myArr.map((obj, i) => {
                    var ComponentName = obj.componentName;
                    return <ComponentName props={obj.props} />
                })
            }
        </div>
    )
}

虽然，显然这可以简化为更少的代码，但我根据您问题中的格式保留了它，以使其更容易。希望这能起作用！