参照 鲁班H5 的 mixins/load-plugins
因为react 没有组件全局注册的概念(可能是我不知道) 所以,你需要写一个 registerModule 的东东 我大概写一下代码
// renderModule.js
import A from '@/src/components/module/A';
import B from '@/src/components/module/B';
export function renderModule (pluginName) {
switch (pluginName) {
case 'A': return A;
case 'B': return B
}
}
renderH5Work(workJSON: JSON) {
renderModule(json.A // name string)
renderModule(json.B // name string)
}
- 写了个大概,只是我的思路,应该是可以落地实现了。有问题可以讨论交流
- Vue 的 render 是根据 组件的name 找到其对应的 JSON 配置
- React 的是 render 传入的是一个 function。这方面,两者还是有些不一样的
最终思路:
- 获取组件列表
- 遍历列表,根据这个生成一个 dict(PluginDict):key 是 component name,value 就是对应的组件,和vue的局部注册的差不多
代码实现
// 改进 renderModule
// renderModule.js
import A from '@/src/components/module/A';
import B from '@/src/components/module/B';
pluginDict = {};
pluginList.forEach(plugin => pluginDict[plugin.name] = plugin)
export function renderModule (pluginName) {
return pluginDict[pluginName]
}
// main
renderH5Work(workJSON: JSON) {
renderModule(json.A // name string)
renderModule(json.B // name string)
}