Question

我对React还是一个新手，遇到了一个我肯定需要帮助的问题。总的来说，我的目标是创建一个可以“注入”或“嵌入”（无论您想称呼它）其他React应用程序的React应用程序。例如，假设您的智能手机。您拥有的主应用程序（OS）具有较小的应用程序，当用户单击它们时可以加载这些应用程序。

我不想将组件“硬编码”到主react应用程序中，该应用程序应该能够呈现服务器返回的任何组件，这样该组件实际上就不会出现在代码中。

在理想的世界中，我希望能够从其他来源（例如S3）加载应用程序，但是出于争论的缘故，这里仅举例说明它们都位于同一硬盘上。

/express-server
    /node-modules
    /react-modules
        /module-1
            index.js
            component1.js
        /module-2
            index.js
            component.js
    app.js

----

/react-app
    app.js

react app.js看起来像这样（同样，我是新来的人，所以这只是我想要做的事情的一个高水平）

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            app_modules: {}
            render_app_modules: []
        };
    }

    componentWillMount() {
        // Get list of module locations from express server
        // For each module, load them up in memory giving each one an id
        modules.forEach((module) => {
              app_modules[module.name] = import(module);
        });
    }

    loadModule(event) {
        // If the app icon was clicked on, add it to the render list
        render_app_modules.push(event.module);
    }

    render() {
        <div class="ModuleList">
            // for each module in app_modules, show it's icon
        </div>

        <div class="RenderedModules">
            // For each component in render_app_module, load it here
        </div>
    }
}

将反向代理React模块动态地移植到另一个React应用程序中

0 个答案: