程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何使用从api获取的React组件?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决如何使用从api获取的React组件??

开发过程中遇到如何使用从api获取的React组件?的问题如何解决?下面主要结合日常开发的经验,给出你关于如何使用从api获取的React组件?的解决方法建议,希望对你解决如何使用从api获取的React组件?有所启发或帮助;

通过使用最新的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将是一个惰性组件。提取完成后将加载它。等待期间,您会看到后备状态。

更多信息:

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

这是一个实验功能!

解决方法

我有一个API,它为我提供了Webpack处理的react组件,如下所示:

@H_447_5@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,{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",value:E}),2&t&&"String"!=typeof E)for(var u in E)r.d(n,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,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,(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}</>)
}

我该如何在代码中的api获取的组件中使用它?

大佬总结

以上是大佬教程为你收集整理的如何使用从api获取的React组件?全部内容,希望文章能够帮你解决如何使用从api获取的React组件?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: