amis框架实现sdk中使用tsx

news2024/11/24 22:36:41

1.开发过程中,由于自己和同事用的不同方式使用,本人使用react搭建的amis框架,同事用sdk使用方式搭建

2.开发过程中遇到问题,如果需求中出现amis无法满足的组件,需要自己进行自定义组件,而不同使用方式的amis需要写两套自定义组件去实现,分别是

sdk方式
// 自定义组件,props 中可以拿到配置中的所有参数,比如 props.label 是 'Name'
function CustomComponent(props) {
  let dom = React.useRef(null);
  React.useEffect(function () {
    // 从这里开始写自定义代码,dom.current 就是新创建的 dom 节点
    // 可以基于这个 dom 节点对接任意 JavaScript 框架,比如 jQuery/Vue 等
    dom.current.innerHTML = 'custom';
    // 而 props 中能拿到这个
  });
  return React.createElement('div', {
    ref: dom
  });
}
import * as React from 'react';
import {Renderer} from 'amis';

@Renderer({
  type: 'my-renderer',
  autoVar: true // amis 1.8 之后新增的功能,自动解析出参数里的变量
})
class CustomRenderer extends React.Component {
  render() {
    const {tip} = this.props;
    return <div>这是自定义组件:{tip}</div>;
  }
}

3.由于个人觉得写两套太麻烦,并且影响效率,所以向官网提了ISSURE,官方给的建议是在amis项目中render引入自己的组件,进行build,然后将生成的sdk拷贝给同事用即可。

4.在打包中遇到了一些问题,

比如说
1."windows"中报错’cp’ 不是内部或外部命令,也不是可运行的程序,解决方案:
(1)可以使用 git的 git bash here 来打包(ps:cp是linux的命令,在windows应该为copy)
(2)使用wsl

2.“NODE_ENV” is not recognized as an internal or external command, operable command or batch file
解决方案:npm install -g win-node-env 安装即可

5.具体操作

1.在amis 中src/renderers/test.tsx 创建自定义组件
这里可以参考官网’如何贡献代码链接
这里可以参考官网'如何贡献代码'
2.在amis项目中生成的sdk拷贝到替换sdk中sdk文件即可
用这里生成的sdk
sdk中替换如下:
在这里插入图片描述

6.实现效果

amis项目实现效果
在这里插入图片描述
sdk中实现效果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/608976.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JVM内存变化分析实战

最近在一次项目压力测试时&#xff0c;监测到JVM内存明显的变化&#xff0c;由于之前开发工作中没有涉及到JVM相关的问题分析&#xff0c;所以特此借这个机会学习和记录。项目使用的JDK版本为 OpenJdk 1.8&#xff0c;虚拟机为 HotSpot。 1. 内存变化情况 在压力测试进行2H48…

Java008——Java关键字和标识符的简单认识

一、Java关键字 围绕以下3点介绍&#xff1a; 1、什么是Java关键字&#xff1f; 2、Java有哪些关键字&#xff1f; 3、Java关键字的作用&#xff1f; 4、Java关键字的使用&#xff1f;后面文章再做介绍 1.1、什么是Java关键字&#xff1f; 定义&#xff1a;被Java语言赋予了…

github开源化课程体系推荐 浙江大学 计算机考研必备408资料汇总 北京大学计算机系资料整理

github漫游指南 github漫游指南 *所有开源课程资料网站整理在文末 什么是GitHub Wiki 百科上是这么说的 GitHub 是一个共享虚拟主机服务&#xff0c;用于存放使用Git版本控制的软件代码和内容项目。它由GitHub公司&#xff08;曾称Logical Awesome&#xff09;的开发者Chr…

【手撕Spring源码】深度理解SpringMVC【下】

文章目录 控制器方法执行流程ControllerAdvice 之 ModelAttribute返回值处理器MessageConverterControllerAdvice 之 ResponseBodyAdviceBeanNameUrlHandlerMapping 与 SimpleControllerHandlerAdapterRouterFunctionMapping 与 HandlerFunctionAdapterSimpleUrlHandlerMapping…

Elasticsearch:节点角色 - node roles

你可能已经知道 Elasticsearch 集群由一个或多个节点组成。 每个节点将数据存储在分片上&#xff0c;每个分片存储在一个节点上。 到目前为止&#xff0c;你看到的每个节点都至少存储了一个分片&#xff0c;但值得注意的是&#xff0c;节点并不总是必须存储分片。 这是因为每个…

【Unity3D】运动模糊特效

1 运动模糊原理 开启混合&#xff08;Blend&#xff09;后&#xff0c;通过 Alpha 通道控制当前屏幕纹理与历史屏幕纹理进行混合&#xff0c;当有物体运动时&#xff0c;就会将当前位置的物体影像与历史位置的物体影像进行混合&#xff0c;从而实现运动模糊效果&#xff0c;即模…

javascript基础二十二:举例说明你对尾递归的理解,有哪些应用场景

一、递归 递归&#xff08;英语&#xff1a;Recursion&#xff09; 在数学与计算机科学中&#xff0c;是指在函数的定义中使用函数自身的方法 在函数内部&#xff0c;可以调用其他函数。如果一个函数在内部调用自身本身&#xff0c;这个函数就是递归函数 其核心思想是把一个大型…

Redis高级数据结构之GEO

GEO的介绍 Redis3.2版本提供了GEO地址位置信息定位的功能。支持存储地理位置信息来实现诸如摇一摇&#xff0c;附近位置这类地理位置信息的功能。 Redis也是使用业界比较通用的地理位置距离排序算法GeoHash算法。将二维的经纬度坐标数据映射到一维的整数&#xff0c;将所有元素…

1.项目环境部署操作

第一步 将资料中提供虚拟机压缩包, 解压到一个没有中文没有空格, 以及磁盘空间相对充足的磁盘中(大于100GB) 第二步 修改VMware的网卡设置: 统一修改为 88网段, 网关为192.168.88.2 vm虚拟机 windows系统 第三步 将两台项目虚拟机挂载到VMware上

Kubernetes学习笔记-开发应用的最佳实践(2)20230604

三、确保所有的客户端请求都得到了妥善处理 如何在pod启动的时候&#xff0c;确保所有的连接都被妥善处理了 1、在pod启动时避免客户端连接断开 当个pod启动的时候&#xff0c;他以服务端点的方式提供给所有的服务&#xff0c;这些服务的标签选择器和pod的标签匹配。pod需要…

【简单实用框架】【读Excel表】【可移植】

☀️博客主页&#xff1a;CSDN博客主页 &#x1f4a8;本文由 我是小狼君 原创&#xff0c;首发于 CSDN&#x1f4a2; &#x1f525;学习专栏推荐&#xff1a;面试汇总 ❗️游戏框架专栏推荐&#xff1a;游戏实用框架专栏 ⛅️点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd;&…

【算法思维】-- 贪心算法

OJ须知&#xff1a; 一般而言&#xff0c;OJ在1s内能接受的算法时间复杂度&#xff1a;10e8 ~ 10e9之间&#xff08;中值5*10e8&#xff09;。在竞赛中&#xff0c;一般认为计算机1秒能执行 5*10e8 次计算。 时间复杂度取值范围o(log2n)大的离谱O(n)10e8O(nlog(n))10e6O(nsqrt(…

LinuxC编程——标准IO

目录 标准I/O一、概念二、特点⭐⭐⭐三、缓冲区⭐⭐⭐3.1 全缓冲3.1 行缓冲3.3 不缓冲 四、函数接口⭐⭐⭐⭐4.1 打开4.1.1 fopen4.1.2 freopen4.1.2 容错机制perror 4.2 关闭4.2.1 fclose4.3 读写操作4.3.1 字符I/O4.3.2 行I/O4.3.3 块I/O 4.4 定位操作4.5 文件结束和错误 脑图…

Redis高级数据结构之HyperLogLog

HyperLogLog的介绍 这并不是一种全新的数据结构、实际类型是一种字符串类型。通过一种基数&#xff08;不重复的元素数量就是基数&#xff09;算法&#xff0c;便可以使用很小的内存空间完成独立总数的统计。数据集可以是IP、Email、ID等官方给出的统计误差是0.81%&#xff0c…

python文本注释数学表达式设置|python绘图中的数学表达式设置

本篇文章将介绍如何在Matplotlib中设置文本、注释和数学表达式&#xff0c;以便更好地呈现数据&#xff0c;提高可视化效果。 文章目录 一、Matplotlib中的文本设置1.1 纯文本设置1.2 含箭头的文本设置 二、Matplotlib中的数学表达式设置三、Matplotlib中的字体设置 一、Matplo…

Vue项目中通过插件pxtorem实现大屏响应式

一、原理 rem单位代表的是根节点的font-size大小&#xff0c;所以当我们在页面上使用rem去替代px的时候&#xff0c;就可以通过修改根节点font-size的值&#xff0c;动态地让页面上的元素根据不同浏览器宽高下去实现变化。 二、工具 1.postcss-pxtorem 作用&#xff1a;在编…

Spring Boot Application.properties和yaml配置文件

文章目录 一、全局配置文件概述二、Application.properties配置文件&#xff08;一&#xff09;创建Spring Boot的Web项目PropertiesDemo&#xff08;二&#xff09;在应用属性文件里添加相关配置1、配置服务器端口号和web虚拟路径2、对象类型的配置与使用&#xff08;1&#x…

微应用如何实现自动更新提示

首先, 先讲一下本次文章所讲的场景, 经过调研, 公司内部使用后台, 当有需求功能迭代的时候, 通常使用者会没有感知, 使用者只会在浏览器内一直打开这个页面, 当需要使用的时候, 再切换这个tab来使用. 这就导致使用者一直不知道系统更新了, 一直没有访问最新的页面(由于最新页面…

日志框架——Log4j2

日志框架——Log4j2 日志框架Log4j21. 概述2. Log4j2主要由几个重要的组件构成:3.项目中使用3.1 引入相关依赖pom.xml3.2 加入日志配置文件src/main/resources/log4j2.xml3.3 测试 日志框架Log4j2 1. 概述 Apache Log4j2是一个开源的日志记录组件&#xff0c;使用非常的广泛。…

【Protobuf速成指南】什么是Protobuf?

文章目录 一、序列化和反序列化1.1 概念1.2 场景1.3 如何序列化 二、Protobuf介绍1. 自身特点2.使用特点 一、序列化和反序列化 1.1 概念 &#x1f3af;[总结]: 序列化&#xff1a;把对象转换为字节序列的过程称为对象的序列化。反序列化&#xff1a;把字节序列恢复为对象的过…