在自定义容器中使用form 报错

[minzhenyu]

json: scaffold = { type: 'vue-info-card-container', label: 'vue-info-card-container', name: 'vue-info-card-container', body: [ // 容器类字段 { "type": "container", "body": [ { "type": "form", "api": "/amis/api/mock2/form/saveForm", "body": [ { "type": "input-text", "name": "name", "label": "姓名：" }, { "name": "email", "type": "input-email", "label": "邮箱：" } ] }, { "type": "tpl", "tpl": "自定义容器区", "inline": false },{ "type": "son", "label": 'npm-custom-son', "name": 'npm-custom-son', } ] } ] };

[minzhenyu]

@wibetter 能麻烦看下吗,我这是用的demo,并且form那段也是从组件api那边copy来的,看了amis下源代码,这个context是不是在vue中不存在导致的,或者是需要对vue组件做处理

[wibetter]

方便的话，截图看下你们的demo代码是怎么写的，

[minzhenyu]

son-plugin.jsx: `/**

• @file 编辑器扩展, 增加自定义组件 */ // @ts-ignore import { registerAmisEditorPlugin } from 'amis-widget';

export class SonPlugin { rendererName = 'son'; $schema = '/schemas/UnkownSchema.json'; name = 'son'; description = '子组件'; tags = ['容器', '自定义']; icon = 'fa fa-file-code-o'; scaffold = { type: 'son', label: 'son', name: 'son' };

previewSchema = { type: 'son', label: 'son', body: '内容' };

panelTitle = '配置';

panelControls = [ { type: 'textarea', name: 'title', label: '卡片title', value: 'amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。', }, { type: 'text', name: 'backgroundImage', label: '展示图片', value: 'https://search-operate.cdn.bcebos.com/64c279f23794a831f9a8e7a4e0b722dd.jpg', }, { type: 'input-number', name: 'img_count', label: '图片数量', value: 3, }, { type: 'input-number', name: 'comment_count', label: '评论数', value: 2021, }, ]; }

registerAmisEditorPlugin(SonPlugin, { rendererName: 'son', name: 'son', // description: '信息展示卡片', // tags: ['展示', '自定义'], order: 99, // icon: 'fa fa-file-code-o', // panelTitle: '配置' });

export default SonPlugin;`

[minzhenyu]

@wibetter 之前只是注册自定义子组件是成功了,只是在这个基础上使用form 就失败了

[minzhenyu]

我用的yarn安装的,会是版本的原因吗,自动安装了1.8.0的版本,我记得之前是beta版本

amis-widget@^1.3.3: version "1.3.5"

amis@^1.8.0, amis@^1.8.0-beta.2: version "1.8.0"

amis-editor@^4.1.0-beta.2: version "4.1.0-beta.4"

[minzhenyu]

我又试了下https://aisuda.bce.baidu.com/amis/zh-CN/components/form/index 里面的默认模式,报同样的错误,甚至使用page组件都同样的报错,是vue自定义组件不兼容的原因吗 { "type": "page", "body": { "type": "form", "api": "/amis/api/mock2/form/saveForm", "body": [ { "type": "input-text", "name": "name", "label": "姓名：" }, { "name": "email", "type": "input-email", "label": "邮箱：" } ] } }

[minzhenyu]

@wibetter 看了下amis-widget 下createVue2Component 里constructor 没传context 这个参数, 还是amis里面WithStore.tsx中 addStore需要使用下图标出来的用法

[wibetter]

看截图使用上没有问题，刚测试了一下，确实是我们这边的问题，我先定位下问题哈

[minzhenyu]

好的,谢谢,辛苦了

[minzhenyu]

@wibetter 本地项目做了一个下拉vue组件放进vue容器中也存在相同报错,这次是wrapControl.tsx中rootStore.addStore 这个方法, 所以个人觉得是对vue组件封装成react组件的方法存在一定问题 amis-widget 中vueFactory.tsx 应该是要做兼容处理

[wibetter]

不一定是amis-widget 中vueFactory.tsx 兼容处理问题，因为涉及到跨技术栈可能还需要amis-editor做对应的调整。等忙完这两天抽空针对性的看下哈，

[wibetter]

目前看跨技术栈支持vue容器还有需要进一步完善的地方，可以试下react容器类自定义组件，

[minzhenyu]

好的,感谢,官方对amis-editor有开源计划吗?黑盒实在是麻烦,没法精准定位问题 我这边也准备换方案了,代价太大,时间上等不及

[wibetter]

不好意思哈，短期内amis-editor没有开源计划，在低代码方面如果有需求也可以使用我们的爱速搭哈，支持私有化部署，定制化服务。

[wibetter]

@minzhenyu amis-editor 从 4.1.0-beta.19 开始已经开源部分源码了：

[minzhenyu]

好的,感谢

[wibetter]

主要是为了方便查看amis-editor中预置组件的可视化配置是如何实现的，这样扩展自定义组件的时候也知道如何设置自定义组件的配置项。

[minzhenyu]

恩,至少有参考信息了