amis框架实现sdk中使用tsx

最新推荐文章于 2025-09-01 12:29:47 发布

原创最新推荐文章于 2025-09-01 12:29:47 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#amis

文章讲述了在开发过程中遇到的问题，即使用React的amis框架和SDK方式搭建应用时，自定义组件需要写两套。作者向amis官方提出了这个问题，官方建议在amis项目中构建自定义组件并集成到SDK。作者分享了解决Windows环境下打包问题的技巧，并提供了实现效果的说明。

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>;
  }
}