Javascript 如何使用从api获取的react组件？

我有一个api，它为我提供了一个Web包处理的react组件，如下所示：

module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var u=t[n]={i:n,l:!1,exports:{}};return e[n].call(u.exports,u,u.exports,r),u.l=!0,u.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var u in e)r.d(n,u,function(t){return e[t]}.bind(null,u));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t){e.exports=require("react")},function(e,t,r){"use strict";r.r(t);var n=r(0),u=r.n(n);function o(){return u.a.createElement("div",null,"Pie Chart")}r.d(t,"default",(function(){return o}))}]);

在react组件内部，我想获取该组件并显示它。这是我迄今为止尝试过的，但不幸的是，它不起作用。api获取可以工作，但它只是将组件显示为字符串

import React, { useState, useEffect } from 'react'
import axios from 'axios'

export function PluginGenerator() {

  const [plugin, setPlugin] = useState(<></>)

  useEffect(() => {
    async function getComponent(){
      const {data} = await axios.get('https://api.example.com/plugin', { withCredentials: true })
      setPlugin(data)
    }
    getComponent()
  })

  return (<>{plugin}</>)
}

import React，{useState，useffect}来自“React”
从“axios”导入axios
导出函数插件生成器（）{
const[plugin，setPlugin]=useState（）
useffect（（）=>{
异步函数getComponent（）{
const{data}=await axios.get（'https://api.example.com/plugin“，{withCredentials:true}）
setPlugin（数据）
}
getComponent（）
})
返回（{plugin}）
}

---

如何从代码中的api获取组件开始使用它？

通过使用最新的chrome，您可以执行以下操作：

const ProfilePage=React.lazy（（）=>import（/*webpackIgnore:true*/'https://api.example.com/profile-page.mjs'));

ProfilePage将是一个惰性组件。提取完成后，将加载它。当你等待时，你会看到退路

更多信息：

---

这是一个实验性的特点

我已经试过了，它对延迟加载非常有效。在本例中，我从外部api获取组件，因此我无法真正使用React.lazy（），或者至少我还没有弄清楚它。我尝试了一个外部链接，但没有反应。lazy（）告诉我它找不到该文件。我还需要为请求传递一个验证令牌。它完全相同。React lazy需要一个函数，而不是返回承诺。您可以创建自己的。例如，

React.laazy（（）=>newpromise（resolve=>{这里您可以编码.fetch；带凭据的axios；解析（组件）

这是非常棘手的。您可以

var模块={exports:'}；eval（componentString）；MyComponent=module.exports；

新浏览器支持使用常规导入关键字导入js文件。这与react lazy无关。但仅当服务器响应头为

text/javascript

时才支持它，如果它是text/javascript yes。浏览器可以使用导入关键字执行它。但如果它只是text，则通常无法执行阅读外部网站的文本。嗨@thiloilg，你能从api/静态主机下载react组件吗？我尝试了延迟加载，但我无法找到如何正确地对组件进行网页打包。我问了一个问题