Reactjs动态组件加载工厂

我在单独的文件中有几个reactjs组件（让它成为windows），例如：

windows/window1.jsx
windows/window2.jsx
...
windows/windowN.jsx

我还有一个名为“WindowManager”的组件，我想用它快速调用代码中任何地方的任何窗口

现在，我应该将所有可能的窗口存储在WindowManager.jsx中，如下所示：

var windowsTypes = {
    window1        : require('windows/window1.jsx'),
    window2        : require('windows/window1.jsx'),
    ...
    windowN        : require('windows/windowN.jsx')
}

function addWindowExt(windowName, windowProps) // where windowName is string
{
    WindowManager.addWindow(require('windows/' + windowName + '.jsx'), windowProps);
}

。。。然后像这样称呼它：

WindowManager.addWindow(windowTypes.windowN, { ... custom windowN-related props ...});

如果我要添加一个新的窗口类型，那么我还应该添加一个新的项目“windowN”：require（…）到“windowsTypes”列表中，在我看来，这并不是一个非常简单的解决方案。我想要达到的是摆脱“窗口类型”的必要性

---

有什么干净的方法可以做到这一点吗？可能需要其他插件和库的帮助？

为什么不简单地使用以下方法：

var windowsTypes = {
    window1        : require('windows/window1.jsx'),
    window2        : require('windows/window1.jsx'),
    ...
    windowN        : require('windows/windowN.jsx')
}

function addWindowExt(windowName, windowProps) // where windowName is string
{
    WindowManager.addWindow(require('windows/' + windowName + '.jsx'), windowProps);
}

---

不需要任何预先填充的地图。

您正在使用webpack吗？不，我没有。我正在使用gulp+browserify+cssify+lint。可能我已经找到了答案：如果答案有效，我会尝试发布。但也许这不是唯一的方法，它有效，但看起来很难看。如果您需要更改windowN.jsx位置，您应该找到windowN的所有用法并进行更改。这似乎不是很枯燥。如果您要更改windowN.jsx的位置，您无论如何都必须继续使用它（IDE可能会帮助您），并且至少要更改导入，否则不管使用这种方法，导入都会被破坏。我真的不明白这是怎么打破干涸原则的。