时间戳

首页 > 解决方案 > 是否可以渲染 React.JS 组件，其中组件的源是从 rest api 调用中提取的？

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

问题描述

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

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

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

注意：这与代码拆分不同。我尝试了各种调用“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 网站并呈现它吗？

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

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

谢谢你。

标签： reactjswebpackbabeljs

解决方案

推荐阅读