Reactjs 动态组件加载工厂

Question

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

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')
}

...然后这样称呼它：

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

如果我要添加一个新的窗口类型，那么我还应该在“windowsTypes”列表中添加一个新项目“windowN”：require(...)，在我看来这不是很干燥的解决方案。我想要实现的是摆脱“windowsTypes”的必要性。

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

Answer 1

你为什么不简单地使用你的方法：

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

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