如何使用从 api 获取的反应组件？

Posted 2023-02-23

【中文标题】如何使用从 api 获取的反应组件？

【英文标题】：How to use a react component fetched from an api?

【发布时间】：2020-03-19 23:27:41

【问题描述】：

我有一个 api，它为我提供了一个经过 Webpack 处理的反应组件，如下所示：

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.exportsreturn 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))]);

在一个反应​​组件内部，我想获取这个组件并显示它。这是我迄今为止尝试过的，但不幸的是它不起作用。 api fetch 有效，但它只是将组件显示为字符串。

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</>)

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

【问题讨论】：

嗨@thilolg，你能从 api/static 主机下载反应组件吗？我尝试了延迟加载，但我无法找到如何正确地 webpack 组件。我问了***.com/questions/60256458/…

【参考方案1】：

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

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

<Suspense fallback=<div>Please wait for component to be loaded</div>>
  <ProfilePage />
</Suspense>

ProfilePage 将是一个惰性组件。一旦获取完成，它将被加载。在您等待时，您会看到回退。

更多信息：

https://reactjs.org/docs/concurrent-mode-suspense.html

这是一个实验性功能！

【讨论】：

我已经尝试过了，它非常适合延迟加载。在这种情况下，我从外部 api 获取组件，所以我不能真正使用 React.lazy() 或者至少我还没有弄清楚。我尝试了一个外部链接，但 React.lazy() 告诉我它找不到文件。我还需要为请求传递一个验证令牌。

完全一样。 React lazy 需要一个函数而不是返回 promise。你可以创建你自己的。例如。 React.laazy(()=>new Promise(resolve=> here you can code. fetch; axios with credentials; resolve(the components)

这很棘手。你可以var module=exports:''; eval(componentString); MyComponent=module.exports;

新浏览器支持使用常规 import 关键字导入 js 文件。它与反应懒惰无关。但仅当服务器响应头为text/javascript

时才支持

如果是 text/javascript 是的。浏览器可以使用 import 关键字执行它。但如果只是文本，通常你无法从外部网站阅读文本。