是否可以渲染 React.JS 组件，其中组件的源是从 rest api 调用中提取的？

Question

我想知道如果组件的源是从 rest api 调用中提取的，是否可以渲染一个 react 组件。例如，如果组件存在于数据库中。

请不要简单地回答“我不会这样做”或“不推荐”。我知道这不是正常的方法。

该用例具有驻留在数据存储中并根据需要拉入的“小部件”列表。以及动态构建组件。理想情况下，这会在客户端运行时发生，但如果这是唯一的方法，我也可以切换到纯粹的服务器端反应。

注意：这与代码拆分不同。我尝试了各种调用“import(...)”的方法，但由于该组件来自rest api调用，因此我无法使其正常工作。如果有办法，请告诉我。

我看过一个类似的例子：https : //codepen.io/qborreda/pen/JZyEaj?editors=1010。但它有一些限制。即组件本身需要的任何额外导入。

function loadRemoteComponent(url){
  return fetch(url)
  .then(res=>res.text())
  .then(source=>{
    var exports = {}
    function require(name){
      if(name == 'react') return React
      else throw `You can't use modules other than "react" in remote component.`
    }
    const transformedSource = Babel.transform(source, {
      presets: ['react', 'es2015', 'stage-2']
    }).code
    eval(transformedSource)
    return exports.__esModule ? exports.default : exports
  })
}

loadRemoteComponent('https://codepen.io/tonytonyjan/pen/QEawag.js').then((Hello) => {
  ReactDOM.render(<Hello/>, document.getElementById('hello'))
})

我原以为我可以存储组件的转译版本并将其拉入反应。但到目前为止，我还没有能够让它发挥作用。通常问题是组件不渲染或 React 抛出错误，因为它期望组件不是原始文本。

我还尝试在客户端上手动转译类似于 react 网站上的“入门”示例，方法是在客户端上包含 babel 独立处理器和 react 脚本（通过脚本标签）。

所以我想我会问社区。总结一下，我的问题是：我可以将 React 组件存储在某个数据存储中，将其拉入我的 React 网站并进行渲染吗？

• 这可以完全在客户端完成吗？
• 使用 React Server Side Rendering 会让这更容易吗？
• 或者这只能通过在启动站点之前的构建步骤来完成？

任何帮助表示赞赏。详细说明所需的步骤或简单的工作示例都很棒。而且我实际上不介意通过链接来获得我的答案。（我知道，令人震惊！）

哦，如果你想知道我一直在使用 create-react-app 来生成应用程序，但我也尝试过手动创建应用程序，自己设置 webpack/babel。

谢谢你。