从字符串阵列动态反应调用组件

Question

我有一个数组：

export const options = [
    {id: 1, name='ComponentOne'},
    {id: 2, name='ComponentTwo'},
]

然后我有我的组件：

export const ComponentOne = props => (<div>{this.props.content}</div>)
export const ComponentTwo = props => (<div>{this.props.content}</div>)

然后我有我的观点：

export class MyView extends React.Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    render(){
        return(
            <div>
                {options.map( obj => <obj.name/> )
            </div>
        )
    }
}

我想动态地渲染这些组件，但不知道该如何。

Answer 1

，而不是保留组件的名称，为什么不保留类本身。喜欢：

const options = [
    {id: 1, componentClass: ComponentOne},
    {id: 2, componentClass: ComponentTwo}
];
export class MyView extends React.Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    render(){
        return(
            <div>
                {
                  options.map(obj => {
                    const Class = obj.componentClass;
                    return <Class />;
                  })
                }
            </div>
        )
    }
}