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。

谢谢。

是否可以在从REST API调用中提取组件源的地方渲染React.JS组件？

0 个答案: