Refer to Mixins /load-plugins of Luban H5

React doesn’t have the concept of a registerModule, so you’ll need to write a 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)
}
Copy the code
  1. Write a general, just my idea, should be able to be implemented. If you have any questions, you can discuss them
  2. Vue render finds the corresponding JSON configuration of the component based on its name
  3. React: render: function In this respect, the two are somewhat different

Final idea:

  1. Get component list
  2. Iterate through the list and generate a dict(PluginDict) from this: the key is the component name, and the value is the corresponding component, much like a vUE’s local registry

Code implementation

/ / renderModule improvement
// 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)
}
Copy the code