文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

使用hel-micro制作远程antd、tdesign-react

传统的react图形组件库导入方式，多项目升级时很麻烦：图片基于hel-micro提升为远程库后，被其他项目使用时，实际运行逻辑不参与项目打包，可以做到使用方无感知动态升级（顺带也降低了项目打包体积，并提高编译速度.../subApp.ts 的 LIB_NAME 为 hel-antd（如不修改，构建时会报模块名不一致错误）- export const LIB_NAME = 'hel-tpl-remote-react-comps-ts...，并在文件头使用import静态导入远程模块运行时代码导出我们先在src/components下导出我们想要暴露的远程组件- import HelloRemoteReactComp from '..../loadApp"); // 你的原始入口文件}main().catch(console.error);导入代理模块接下来你可以在项目里除入口文件之外的其他任意文件想导入本地模块一样导入远程模块并使用了...helDevUtils.createReactSubApp(pkg, { npmCdnType: 'unpkg', homePage: 'http://my-unpkg.com' });自建npm+unpkg私服可参考issue

1.3K20

使用 React 和 TypeScript something 编写干净代码的10个必知模式

这样做的结果就是 JavaScript 错误被捕获得非常晚，这可能导致严重的 bug。 当然 React 作为一个 JavaScript 库，也继承了这个问题。...使用默认导入来导入 React 考虑下面的代码: import * as React from "react"; 虽然上面的代码可以工作，但是如果我们不使用 React 的所有内容，那么导入它们是令人困惑的...一个更好的模式是使用如下所示的默认导出: import React, {useContext, useState} from "react"; 使用这种方法，我们可以从 React 模块中解构我们需要的东西...，而不是导入所有的内容。...为了防止由于意外设置状态而导致的开发错误: this.state = {} 考虑下面的代码: import React, {Component} from "react"; const initialState

1.6K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    最完备的懒加载错误兜底方案，再也不会白屏了！

    /path/to/component') 动态导入会返回一个 promise 对象，并且导入成功时这个 promise 需要 resolve 一个具有默认导出(default exprot)的模块，但是...以 React 为例，通常我们搭配 React.lazy 来使用动态导入，React.lazy 接受一个返回 promise 的函数。.../OurComponent')); 本文虽然是以 React 为例，但在 Vue 项目的动态导入也可以使用下方的优化方案。 动态导入失败时，lazy 不会隐式处理异常。...异常处理 这一层需要做的事有： 成功时需要返回一个具有默认导出的模块 失败时捕获错误并上报日志 function componentLoader(componentImport) { return...=> { componentImport() .then(resolve) .catch(e => { + if (retryLeft > 1) { // 尝试重新加载

    1.6K20

    React报错之Element type is invalid

    忘记从文件中导出组件。 不正确地定义了一个React组件，例如，作为一个变量而不是一个函数或类。...type-is-invalid-expected-string-but-got.png 为了解决该错误，确保使用大括号来导入命名导出而不是默认导出，并且只使用函数或类作为组件。...可以作为一个React组件使用。 混淆导入导出 另一个常见的错误原因是混淆了默认和命名的导入和导出。 当组件使用默认导出来导出时，你必须确保导入的时候没有使用大括号。...从react-router-dom导入 当我们从react-router而不是react-router-dom导入东西时，有时也会出现这个错误。...react router，请确保从react-router-dom导入，而不是从react-router中。

    2.5K20

    手把手教你用神器nextjs一键导出你的github博客文章生成静态html！

    项目导出成静态html页面，这样在性能和seo方面考虑都是最优解。...配合这个命令我就有了个折腾的想法，能不能把github issues导入到项目里，然后配合这个命令生成我的静态html博客呢。...运行 安装依赖： yarn 开发环境： yarn dev 导出博客(会放在out目录下，导出后请进入out目录后启动anywhere或者http-server类似的静态服务然后访问)： yarn all...的id去命名博客，所以可以在这一步中读取md文件夹下的所有issue id，就可以在这个blogs数组中找到对应的issue信息，这个issue对象中有github api给我们提供的comments_url...另外我们在这一步就要配合markdown-it插件把md内容转成html格式，并且通过encodeURIComponent转义后再写入我们的jsx内，否则会出现很多格式错误。

    4.4K20

    总结100+前端优质库,让你成为前端百事通

    无依赖库，使您能够使用精美的动画过滤，排序，添加和删除 DOM 元素的 js 动画库 「Lottie」 一个用于 Android，iOS，Web 和 Windows 的库，用于解析使用 Bodymovin 导出为...一个能渲染大型列表和表格的 React 解决方案 react-file-viewer React 在线 PDF 预览插件 react-copy-to-clipboard 基于 React 的复制到剪切板组件...动画/动效果 Halogen 使用 React 的加载动画集合 react-loading 一款基于 react 的轻量级加载动画库, 支持按需导入, 开箱即用 react-move 漂亮的，数据驱动的...React 动画库 react-spring 一个基于弹簧物理学的动画库 react-text-loop-next 文字轮播动画 图像处理 react-image-crop 强大的图片裁切库 react-sparklines...编辑器 地图相关 google-map-react 谷歌地图插件 react-amap 高德地图插件 react-baidu-map 百度地图 优秀国产项目集合 可视化编辑器 h5-dooring

    4K20

    🚀 突破性更新！JeecgBoot v3.8.1 震撼来袭 — 引领 AI 低代码开发新纪元！

    · Issue #7812 表格列设置组件异常(ColumnSetting.vue) · Issue #7996 3.7.2 错误的构造函数 · Issue #8049 ApiSelect组件中, 初始化值存在缺失的逻辑判断导致单选框的值被错误地写入数组值...· Issue #7619 翻译Popup字典错误 · Issue #8114 icon图标显示空白问题 · Issue #8097 线上环境甘特图信息未消失异常 · Issue #8104 V3.7.4...，导出失败 · Issue #8230 autopoi使用模板导出时,如果在循环列后存在公式单元格,导出来后该单元格未空，公式没了 · Issue #8148 系统监控>请求追踪，列表每刷新一下，总数据就减一...强大的权限机制，支持访问授权、按钮权限、数据权限、表单权限等 零代码在线开发能力，在线配置表单、在线配置报表、在线配置图表、在线设计表单 常用共通封装，各种工具类(定时任务,短信接口,邮件发送,Excel导入导出等...),基本满足80%项目需求 简易Excel导入导出，支持单表导出和一对多表模式导出，生成的代码自带导入导出功能 集成简易报表工具，图像报表和数据导出非常方便，可极其方便的生成图形报表、pdf、excel

    65020

    开源低代码平台，JeecgBoot v3.7.1 大版本发布

    online 字段维护，增加快速定位字段功能online 字段查询配置支持设置默认模糊查询高级查询增加为空和非空两个条件online 数据权限配置，系统变量表达式错误修复online 图片导出改为文本导出...解析提示签名验证失败错误，恢复默认签名密钥串使用正常・Issue #6941JVxeTable addRows 后表格数据错误・Issue #7013JVxeTable 表格 Column 配置 formatter...InputStream 的方式・Issue #7084AutoPOI 问题导入 map, 使其有序解决遍历行的次行合并样式问题加强继承扩展便利性issue/#5933 增加清除缓存方法Excel 导入时空行校验问题生成代码后子表图片无法导出...强大的权限机制，支持访问授权、按钮权限、数据权限、表单权限等零代码在线开发能力，在线配置表单、在线配置报表、在线配置图表、在线设计表单常用共通封装，各种工具类 (定时任务，短信接口，邮件发送，Excel 导入导出等...), 基本满足 80% 项目需求简易 Excel 导入导出，支持单表导出和一对多表模式导出，生成的代码自带导入导出功能集成简易报表工具，图像报表和数据导出非常方便，可极其方便的生成图形报表、pdf、excel

    1.6K10

    「万字进阶」深入浅出 Commonjs 和 Es Module

    ； require 函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容； commonjs 使用初体验 导出：我们先尝试这导出一个模块： hello.js中 let name =...export 正常导出，import 导入 导出模块：a.js const name = '《React进阶实践指南》' const author = '我不是外星人' export { name,.../a.js' export const author = '我不是外星人' } 错误写法二： isexport && export const name = '《React进阶实践指南》'...import 的导入名不能为字符串或在判断语句，下面代码是错误的 错误写法三： import 'defaultExport' from 'module' let name = 'Export' import...ES6 Module 的值是动态绑定的，可以通过导出方法修改，可以直接访问修改结果。 ES6 Module 可以导出多个属性和方法，可以单个导入导出，混合导入导出。

    2.7K10

    ESModule 系列 (二)：构建下一代基础设施 PDN

    /exports.mjs' [ESM] 可以看到，ESM 模块语法在代码执行前就会通过静态语法检测，解析出子模块的具名导出变量和默认导出变量，然后会根据导入语法，在代码真正执行前先进行一次校验，如果引入了错误的变量...，会直接抛出错误；而 CJS 模块语法不会预先进行语法检测，而是运行源代码，运行到 require 函数被调用时才会去处理子模块的导出。...{ default as A } 来导入，通过具名导出语法 export { A } 导出的值，只能通过 import { A } 导入。...这两种导入导出方式不能混用，若错误使用，浏览器底层会直接抛出错误，而在 CJS 中，由于导出的值一直是一个对象，所以通过 require 引入模块时，是不会抛出语法错误的（除非模块不存在）。...{ xxx } 通过在 Node.js 中模拟一个 Browser Context，在 Context 中尝试调用 require('Module')，通过 CJS 加载方式拿到模块的导出对象，将其手动编译成具名导出和默认导出方案

    1.6K20

    「万字进阶」深入浅出 Commonjs 和 Es Module

    ； require 函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容； commonjs 使用初体验 导出：我们先尝试这导出一个模块： hello.js中 let name =...export 正常导出，import 导入 导出模块：a.js const name = '《React进阶实践指南》' const author = '我不是外星人' export { name,.../a.js' export const author = '我不是外星人' } 错误写法二： isexport && export const name = '《React进阶实践指南》'...import 的导入名不能为字符串或在判断语句，下面代码是错误的 错误写法三： import 'defaultExport' from 'module' let name = 'Export' import...ES6 Module 的值是动态绑定的，可以通过导出方法修改，可以直接访问修改结果。 ES6 Module 可以导出多个属性和方法，可以单个导入导出，混合导入导出。

    3.9K31

    antd popover定位不准闪跳解决+自己实现popover库

    由于我想做一个除react外零依赖的，所以就不考虑react-transition-group或者styledcomponent，直接进行手撸动画。...H5页面配置文件 保存为模版库功能 H5移动端跨端适配 媒体组件(视频组件) 在线下载网站代码功能 添加typescript支持 表单设计器/自定义表单组件 可视化图表组件实现, 包括编辑图表,图表数据导入导出...在线编程模块(Mini Web IDE) 添加图片库,支持用户在线选择图片素材 添加客服机器人 dooring管理后台初步完成 已修复bug数20+, github issue处理率92%, 欢迎各位提出有意思的...issue....正在规划功能 支持PSD文件导入一键生成H5 交互组件开发 音频组件开发 可嵌套组件开发 最后 以上教程笔者已经集成到H5-Dooring中，对于一些更复杂的交互功能，通过合理的设计也是可以实现的，大家可以自行探索研究

    2.7K51

    【DeepSeek版】JeecgBoot低代码 3.7.3 发布，集成DeepSeek实现AI编程

    升级前端依赖vite6、antd3.4.19、antd4.2.6 JimuReport升级到最新版1.9.3 JimuBI大屏升级到最新版1.9.3 租户套餐管理优化体验 AutoPoi Excel表格导入有问题...404 错误 · Issue #7587 最新版样式错乱 · Issue #7605 Online 表单开发 页面属性 查询选择模糊查询 结果生成的代码是 JRangeNumber 而且页面中不显示...JeecgBoot前端文档内容不符（getValue方法） · Issue #7631 修改手机号报 404 错误 · Issue #7681 JvxeUserSelectCell 组件，希望能把maxTagCount...强大的权限机制，支持访问授权、按钮权限、数据权限、表单权限等 零代码在线开发能力，在线配置表单、在线配置报表、在线配置图表、在线设计表单 常用共通封装，各种工具类(定时任务,短信接口,邮件发送,Excel导入导出等...),基本满足80%项目需求 简易Excel导入导出，支持单表导出和一对多表模式导出，生成的代码自带导入导出功能 集成简易报表工具，图像报表和数据导出非常方便，可极其方便的生成图形报表、pdf、excel

    54510

    React lazy 原来是这么动态加载组件的！

    React.lazy 的实现原理 React.lazy 的核心是利用 JavaScript 的动态导入和 React 的内部机制来实现按需加载。...以下是其工作流程： 动态导入 React.lazy 接受一个返回 Promise 的函数，该 Promise 解析为模块对象，通常包含 default 导出的组件！...❝这也是每个模块入口需要 default 导出，而组件不需要的原因。 动态导入基于 ES Modules 的 import() 语法，浏览器会异步加载指定的模块。...1, // 未加载 _result: null, // 加载后的组件或错误 } } 加载过程 当 LazyComponent 首次渲染时，React 调用 _init（即动态导入函数），触发模块加载...加载失败 当然，当加载失败时，也可以使用 Error Boundary 捕获错误，防止应用可能崩溃。

    62410

    【免费大屏版】JeecgBoot v3.7.2 大屏版发布，开源低代码平台

    URL参数 · Issue #7208用模版导出xlsx时如果存在循环行导出会导致循环行后面的公式失效 · Issue #7161【3.7.3】jeecg-qiankun 提议 · Issue #6947jeecgboot-vue3...时，show/hide控制会在多个自定义按钮间互相影响造成显示错误 · Issue #7387BasicTable在二级表头中，行编辑失效 · Issue #7384【3.7.3】jeecg-qiankun...版本号：master 多租户模式下 数据权限使用变量：#{tenant_id} 报错 · Issue #7481src/utils/index.ts的numToUpper方法返回解决错误 · Issue...强大的权限机制，支持访问授权、按钮权限、数据权限、表单权限等零代码在线开发能力，在线配置表单、在线配置报表、在线配置图表、在线设计表单常用共通封装，各种工具类(定时任务,短信接口,邮件发送,Excel导入导出等...),基本满足80%项目需求简易Excel导入导出，支持单表导出和一对多表模式导出，生成的代码自带导入导出功能集成简易报表工具，图像报表和数据导出非常方便，可极其方便的生成图形报表、pdf、excel、word

    81620

    React背后的工具化体系

    ，而export支持更细粒度的原子级导出。...支持的更多信息，请查看Even Better Support for React in Flow 另外还有导出类型检查的Flow“魔法”，用来校验mock模块的导出类型是否与源模块一致： type Check...，关掉不活跃的讨论贴 主要围绕PR与Issue做一些自动化的事情，比如React团队计划（目前还没这么做）机器人回复PR对bundle size的影响，以此督促持续优化bundle size 目前每次构建把...作为源码依赖） 存在一些问题： 自行构建的版本不一致：不同的build环境/配置构建出的bundle都不一样 bundle性能有优化空间：用打包App的方式构建类库不太合适，性能上有提升余地 不利于实验性优化尝试...简言之，在prod bundle中把详细的报错信息替换成对应错误码，生产环境捕获到运行时错误就把错误码与上下文信息抛出来，再丢给错误码转换服务还原出完整错误信息。

    1.8K20

    JimuReport积木报表 v1.7.0 变革版本发布，报表工具

    · Issue #2203官网在线体验，图表设置单元格背景色后打印和导出PDF显示异常 · Issue #2354导入报表配置报错 · Issue #2333自定义横向分组 日期排序错误,不能排序 ·...Issue #2355删除线，下划线使用之后再点取消，导出的excel仍有两线 · Issue #2345图表PDF导出内容异常 · Issue #2332DBSUM 加查询条件统计时报 SQL 语法错误.../#881 api报表增加字段映射功能函数表达式 有空格时失效日期函数支持小时显示带背景导出图片错乱 #2379带背景导出图片时报错 #2377提供SpringBoot3+JDK17支持版本报表设计效果报表设计器...地图│ │ ├─仪盘表│ │ ├─关系图│ │ ├─图表背景│ │ ├─图表动态刷新│ │ ├─图表数据字典│ ├─参数│ │ ├─参数配置│ │ ├─参数管理│ ├─导入导出...│ │ ├─支持导入Excel│ │ ├─支持导出Excel、pdf；支持导出excel、pdf带参数│ ├─打印设置│ │ ├─打印区域设置│ │ ├─打印机设置│ │ ├─预览

    76300
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券