鲁班H5(开源可视化搭建系统) React 版本实现思路

849 阅读1分钟

参照 鲁班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)
}

  1. 写了个大概,只是我的思路,应该是可以落地实现了。有问题可以讨论交流
  2. Vue 的 render 是根据 组件的name 找到其对应的 JSON 配置
  3. React 的是 render 传入的是一个 function。这方面,两者还是有些不一样的

最终思路:

  1. 获取组件列表
  2. 遍历列表,根据这个生成一个 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)
}