动态地将组件注入表格单元 - React

Question

我有一个州data作为输入。我有两个组件TRow和TCell来构造整个表（迭代数据来构造表）。但我的方案是，每个单元格可以有不同的组件，具体取决于type中的data。在下面的案例中type有A（或）B（或）C。

如何在运行时创建它？我不想事先预先导入所有组件，只导入（使用导入功能）所使用的类型并使用它们。我如何实现这一目标？我正在寻找某种模式，或者可能是解决问题的更好方法。

表生成器

export default class TabularBuilder extends Component{
    constructor(){
        super();
        this.state = {
            data: [
                [
                    {
                        rowspan: 1,
                        colspan: 1,
                        type: 'A'
                    },
                    {
                        rowspan: 1,
                        colspan: 1,
                        type: 'B'
                    },
                    {
                        rowspan: 1,
                        colspan: 1,
                        type: 'B'
                    }
                ],
                [
                    {
                        rowspan: 1,
                        colspan: 1,
                        type: 'B'
                    },
                    {
                        rowspan: 1,
                        colspan: 1,
                        type: 'A'
                    },
                    {
                        rowspan: 1,
                        colspan: 1,
                        type: 'c'
                    }
                ]
            ]
        };
    }

    render(){
        let tableRows = _.map(this.state.data, (row, index) => {
            return <TRow data = {row} key = {index} />;
        })
        return <table><tbody>{tableRows}</tbody></table>;
    }
}