我认为可能对我试图实现的目标有些困惑。我设法解决了我遇到的问题，并在下面显示了我的代码，其中显示了我是如何解决它的。

单独的文件（ComponentIndex.js）：

    let Components = {};

    Components['Component1'] = require('./Component1').default;
    Components['Component2'] = require('./Component2').default;
    Components['Component3'] = require('./Component3').default;

    export default Components

主文件（Main.js）：

    import React, { Component } from 'react';
    import Components from './ComponentIndex';

    class Main extends Component {
        render () {
            var type = 'Component1'; // example variable - will change from user input
            const ComponentToRender = Components[type];
            return <ComponentToRender/>
        }
    }

    export default Main

这种方法允许我非常快速地添加/删除组件，因为导入位于一个文件中，并且一次只需要更改一行。

由于问题真的很老，所以答案可能还可以。但是现在，如果有人遇到同样的问题应该使用动态导入，以便只加载需要的组件并避免加载所有不同的组件。

const component = React.lazy(() => import('./component.jsx'));

试试这里的例子：演示

import React, { Component } from 'react'
import Component1 from './Component1'
import Component2 from './Component2'
import Component3 from './Component3'

class Main extends Component {
    render() {
        var type = 'Component1';  // just an example
        return (
          <div>
            {type == "Component1" && <Component1 />}
            {type == "Component2" && <Component2 />}
            ...
          </div>
        )
    }
}

export default Main

您可以使用条件渲染插入。希望它会有所帮助

检查这个

这是另一个解决方案：我们获得所需组件的列表list = ['c1', 'c2', 'c3']。它可以从 json 文件拉到一个数组中（我使用 redux-store 所以我开始通过 this.props.getForms() 获取表单）。但是您可以手动创建和访问组件列表。

    componentDidMount = () => {
//we get elements list from any source to redux-store
        this.props.getForms();
//access redux-store to the list
        const forms = this.props.configBody.sets;
//make deep object copy
        const updatedState = { ...this.state };
        updatedState.modules = [];
        if (forms) {
//here is the very dynamic import magic: we map the import list and prepare to store the imports in Component`s state
            const importPromises = forms.map(p =>
                import(`../TemplateOrders/Template${p.order}`)
                    .then(module => {
                        updatedState.modules.push(module.default)
                    })
                    .catch(errorHandler(p))
            )
//wait till all imports are getting resolved
            Promise.all(importPromises)
                .then(res =>
//then run setState
                    this.setState({ ...updatedState }, () => {
                        console.log(this.state);
                    }))
        }
    }

    render() {
        const forms = this.props.configBody.sets;
//we iterate through the modules and React.createElemet`s 
        const list = this.state.modules
            ? this.state.modules.map((e, i) =>
                createElement(e, { key: forms[i].title }, null)
            )
            : [];
        return (
            <Fragment>
                <Link to='/'>Home</Link>
                <h1>hello there</h1>
//push them all to get rendered as Components
                {list.map(e => e)}
            </Fragment>
        )
    }

因此，当您的应用程序加载时，它会拉取所需的module。

我想使用Promise来导入它们，但是module已经是 Promise 了。

在情况下，我们需要从最近的服务器Ajax它们，所以我们需要绑定前的module分割要求（或类似的东西），不知道到底。

您可以将您的组件捆绑为微应用程序，并从 url 将它们热加载到您的应用程序中。这是一个支持从基于站点级别配置的路由动态导入组件和微应用程序的 poc。

https://github.com/eschall/react-micro-frontend