如何使用从api获取的react组件？ [英] How to use a react component fetched from an api?

问题描述

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

I have an api which provides me a with Webpack processed react component which looks like the following:

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提取有效，但仅将组件显示为字符串。

Inside of a react component I want to fetch this component and display it. This is what I tried so far but unfortunately it does not work. The api fetch works but it just displays the component as string.

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提取组件中使用它？

How could I go about using this from the api fetched component inside my code?

推荐答案

使用最新的Chrome，您可以执行以下操作：

By using the newest chrome you can do something like this:

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将是一个惰性组件。提取完成后将加载它。

ProfilePage will be a lazy component. It will be loaded once the fetch completed. While you wait you will see the fallback.

更多信息：

• < a href = https://reactjs.org/docs/concurrent-mode-suspense.html rel = nofollow noreferrer> https://reactjs.org/docs/concurrent-mode-suspense.html

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

这是一个实验功能！

这篇关于如何使用从api获取的react组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！