for example, I want to generate components from a circular array:
import React, { Component } from "react";
import { Button, Input } from "antd";
const arr = ["Button", "Input"]; // <Button /> <Input />
export default class MyComp extends Component {
renderComp = arr => {
return arr.map(V => {
return React.createElement(this.transform(V), null, null)
//
// <V /> React.createElement(V, null, null) <Button /> <Input />
})
}
transform = str => {
switch(str){
case "Button":
return Button;
case "Input":
return Input;
default:
return null;
}
}
render(){
return(
<div>
{this.renderComp(arr)}
</div>
)
};
} what should I do?
have also tried new Function, dangerouslySetInnerHTML and eval
, all of which cannot be implemented =-=