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'

现在定义一个数组，并检查componentName不是字符串，而是导入的组件。

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

现在，在渲染功能中：

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

虽然，显然可以将其简化为更少的代码，但是为了方便起见，我一直按照问题的格式进行保存。希望能成功！

动态渲染反应元素

2 个答案: