amis框架实现sdk中使用tsx

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