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中替换如下:
6.实现效果
amis项目实现效果
sdk中实现效果