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中实现效果
 



















